css定位

浮动可以让多个块级赫兹一行没有缝隙排列显示,经常用于横向排列盒子

定位可以让盒子自由地在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子

(资料图片仅供参考)

定位:将盒子定在某一个位置,所以定位也是在摆放盒子

定位=定位模式+边偏移

定位模式用于指定一个元素在文档中的定位方式,边偏移决定该元素的最终位置

边偏移有top/bottom/left/right四个属性

相对定位

相对定位:元素在移动位置的时候,是相对于它原来的位置来说的(自恋型)

相对于自己原来的位置移动(移动位置的时候参考点是自己原来的位置)

原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待他(不脱标,继续保留原来位置)

绝对定位

绝对定位:元素在移动位置的时候是相对于它的祖先元素来说的

如果没有祖先元素或祖先元素没有定位,则以浏览器为准定位

如果祖先元素有定位(相对/绝对/固定),则以最近一级有定位的祖先元素为参考点移动位置(父亲没有看爷爷的)

绝对定位不在占有原先的位置(脱标)

子绝父相

子级绝对定位,不会占有位置,可以放到父盒子里面任何一个地方,不会影响其他的兄弟盒子

父盒子需要加定位限制子盒子在父盒子内显示

父盒子布局时,需要占有位置,因此父亲只能是相对定位

总结:因为父级需要占有位置,因此是相对定位,子盒子不需要占有位置,则是绝对定位

固定定位

以浏览器的可视窗口为参照点移动元素,跟父元素没有任何关系

不随滚动条滚动

不再占有原先位置

让固定定位在版心右侧

让固定定位的盒子left=50%,走到浏览器可视区一半位置

让固定定位的盒子margin-left=版心宽度的一半距离

就可以让固定定位的盒子贴着版心右侧对齐了

定位的叠放顺序z-index

在使用定位布局时可能出现盒子重叠的情况,可使用z-index控制盒子的前后次序

数值可以是正整数,负指数或0,默认为auto,数值越大盒子越靠上

如果属性值相同则按照书写顺序,后来居上

数字后面不能加单位

只有定位的盒子才有z-index属性,标准流和浮动没有

绝对定位和盒子居中

加了绝对定位的盒子不能通过margin:0 auto水平居中,但是可以通过以下方法实现水平和垂直居中

left: 50%让盒子的左侧移到父级元素的水平中心位置

margin-left:-100px让黑向左移动自身宽度的一半

定位的拓展

脱标的盒子不会触发外边距塌陷浮动元素/绝对定位/固定定位 的元素都不会触发外边距合并的问题

浮动的元素不会压住下面标准流的文字(图片),只会压住下面标准流的盒子但是绝对定位/固定定位会压住下面标准流所有的内容

网页布局总结

标准流:可以让盒子上下排列或者左右排列,垂直的块级赫兹显示就用标准流布局

浮动:可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局

定位:最大的特点就是有层叠的概念,可以让多个盒子前后叠压来显示,如果元素自由在某个盒子内移动就用定位布局

关键词：

责任编辑：Rex_12