CSS基础——position位置属性

relative:相对布局,相对自身进行偏移,并且保留原有位置。

absolute:绝对布局,相对容器进行偏移,不保留原有位置。注意:容器必须设置position为relative或absolute,如果没有相对body偏移。

   同一行中absolute会对 inline-block 有影响,具体是将原来顶部对齐,变成底部对齐。这时用float不会有影响。

fixed:固定布局,相对浏览器窗口位置固定,没有任何依赖感。

static:position的默认值。

z-index:重叠时设置层次,值大的在上面。

原文地址:https://www.cnblogs.com/yz9110/p/8628277.html

时间: 2024-11-12 19:38:40

CSS基础——position位置属性的相关文章

CSS中"position:relative"属性与文档流的关系

前言 近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:"position:relative"不会导致元素脱离文档流. 博文地址:CSS中"position:relative"属性与文档流的确切关系 "relative"与文档流 说到标准,最权威的自然莫过于CSS标准文档.经过一番繁琐的查找之后(w3c网站

Css中Position定位属性与层级关系

今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Css中Position定位属性与层级关系</title> 6 <style type="text/css"> 7 #W{ 8

关于CSS中position的属性

position的属性: 1.static (文档流):默认值,没有进行定位,元素出现在正常流中,忽略top   left   right   bottom   z-index的申明 (无影响). 一行接着一行 2.relative(相对定位):生成相对定位的元素,相对于其正常的位置进行定位.例如,"left:20px" 会向元素的 LEFT 位置添加 20 像素.即通过left.right.top.bottom属性在正常文档流中的偏移位置,相对定位完成的过程是首先按static(fl

css的position,float属性的理解

我们知道,html是按照普通流来加载的,这个时候我们有些需求就不好实现.因此出现了非普通流: 1.普通流:按照顺序正常的排列,长度或不够就往下挤.position默认的static 2.非普通流:脱离了普通流(不按照普通流渲染),后面介绍的有position的relative, absolute, fixed以及float属性.尤其是float属性,滥用情况非常. 以下所说的"脱离普通流"是指不按照正常普通流的方式渲染,不要和单独一层混谈! static: 处于普通流,也就是按照普通流

css基础 position:fixed/absolute 把div转换为行内块元素

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

css基础 一个class属性给两个名字(实用技巧)

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

CSS背景图像位置属性background-position百分比详解

百分比值同关键字很接近,但其操作方式不一样.用百分比值来居中一幅背景图像,也很简单: body { background-image;url(beijing.gif); background-repeat:no-repeat; background-position:50% 50%; } 这使得背景图像的中心同其父元素中心对齐.换句话说,百分比值同时应用于元素及其背景图像. 为理解这一概念,让我们桌仔细观察其过程.当在某一元素里居中背景图像时,图像中被描述为50% 50%的点将与元素中同样描述的

css基础:样式属性

1.背景与前景:background-color::背景色,样式表优先级高. background-image:url(路径):设置背景图片 background-attachment:fixed:背景固定,不随字体滚动.scroll:背景随字体滚动. background-repeat:no-repeat:不平铺.repeat:平铺.repeat-x:横向平铺.repeat-y:纵向平铺. background-position:center 背景图居中,设置背景图时,top 上,left 左

深入理解css中position属性及z-index属性

深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute.最后将会介绍和position属性密切相关的z-index属性. 第一部分:position: static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到t