CSS定位模型
2017-06-09 本文已影响21人
Hyphone
设定位置
- position:static; 可以取消元素的定位设置，使之恢复为原先在常规流中的显示方式，static是默认值。
- position:relative; 可以使元素相对于常规流的位置偏移一定距离。
- position:absolute; 可以使元素相对于常规流的位置或最近定位祖先元素的位置偏移一定的距离。
- position:fixed; 可以使元素相对于窗口偏移一定的距离。
- z-index 可以设置元素的堆叠顺序，数值越大，元素越靠上。
最近定位祖先元素
- 如果设定位置的元素没有定位祖先元素，那么<body>就成为定位祖先元素，换言之，<body>是默认设定位置元素。
- 最近定位元素必须是有效的祖先元素（relative|absolute|fixed），css不支持相对于文档中任意元素进行定位的方法。
- position:relative;是一个非常好的创建定位祖先元素的方法，因为它不会离开常规流。使用这种方法，能够创建出既保持常规流又实现绝对定位的布局。
web前端css支持6种定位模型
-
静态定位模型
position:static;默认是static
- 静态元素的开始位置由前一个静态元素的位置确定。静态元素的尺寸、内边距、边框和外边距决定了下一个元素的开始位置。
- 相邻元素的垂直外边距会合并在一起，最终的外边距是两个相邻元素外边距的较大值。
- 将左右外边距设置为auto，可以使已设定尺寸的静态块级元素居中显示。
-
绝对定位模型
position:absolute;百分数是相对于最近定位祖先元素的尺寸而言，而非父元素的尺寸。将元素的left、right、top、bottom设置为auto，可以使它恢复原先在常规流中的位置。
- 与浮动元素不同，绝对元素不会自动排列，不会受其他元素影响，也不会影响别的元素。
- 如果一个元素的所有子元素都设置为绝对定位，那么它的高度会变为0，所有它的子元素都离开了常规流。
- 如果不存在定位祖先元素，会根据<body>来定位
- 绝对定位居中【一般元素】
div{
position: absolute;
width: 100px;
height: 100px;
margin: 0 auto;
}
- 绝对定位居中【静态行内元素】
- 对于静态行内元素，如em,strong,span等，但是不包括行内可替换元素（input,img,textarea等），使用绝对定位模式absolute时，width和height需要设置，为了要居中，需要额外的加上left:0;和right:0;，使用margin: 0 auto;可以正常的生效。
- 注意，这里left和right必须是0才行。
#em{
position: absolute;
width: 100px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;
}
-
固定定位模型
position:fixed;可以将任意元素变为固定位置元素。
切记：固定定位的元素位置是相对于窗口而定，而非相对于最近定位祖先，而且元素不会随页面滚动而滚动。
因为它是相对页面来定位，所以不需要最近定位祖先。
设置时最好以top，left来进行偏移定位，当同事设置top,left,bottom,right时，会有限使用top和left的值，只有当top和left不存在时，bottom和right才会生效。 -
相对定位模型
position: relative;
- 使用left和top来改变元素位置，left和top默认是auto,auto会使相对定位元素保持在常规流中原有位置。
使用float可以使一些元素成为浮动元素，通过relative可以浮动元素设置为相对定位，相对浮动元素仍然位于浮动元素所在的常规流中，可以使用left和top设置它在流中的偏移位置。 - 任何元素都可以设置position: relative;从而其绝对定位的后代元素都可以相对于它进行定位。
- 使用float: none;默认是none,可以覆盖元素的其他浮动规则，也可以避免继承浮动。
使用float:left;和float:right;可以使元素离开常规流。
- 浮动定位与复位
- 浮动元素不会影响块级框的位置，而只影响行内元素
- 任意元素都可以设置为浮动元素
- clear: left; clear: right; clear: both;
- clear适用于表格、块级元素和浮动元素，不适用于行内、绝对定位和固定定位的元素
- 相对浮动定位
- 只有position: relative;和position: static;适用于浮动元素，而设定为absolute和fixed时,显示结果是不确定的。
其他
- 在CSS中，如果参数值是0的话，不要加单位。
- 浏览器在渲染一个元素内容之前，会先渲染它的框，顺序是从背景颜色开始，然后是背景图片，接着是边框，最后浏览器会在框之上渲染框的内容。
