CSS定位及圆角矩形（6）

定位

布局的核心：css摆放盒子的位置

定位：将盒子定在某一个位置，自由的漂浮其它盒子上面

定位=定位模式+边偏移

边偏移

三种布局机制的上下顺序

标准流 + 浮动 + 定位

定位模式

选择器 {position:属性值}

静态定位（了解）

static:静态定位 静态定位是定位模式中的默认属性，没有边偏移，在网布布局中几乎不用





    
    
    Document

relative（了解）

相对定位根据自身标准流的位置来进行边偏移。





    
    
    Document

相对定位的两个特性

继续占有原来的位置
相对于它本身的位置来进行边偏移





    
    
    Document

绝对定位

绝对定位的特点

不占有原来的位置，脱离标准流
绝对定位以父元素的定位为准，父元素不能是静态定位，如若父元素没有定位，便以浏览器的视口为准





    
    
    Document

子绝父相

简单而言。就是子元素用绝对定位，父元素用相对定位，只要这样，才不会影响下面的标准流布局

在此案例中，两个箭头使用的是绝对定位，而父元素使用的是相对定位

哈格达斯案例





    
    
    Document

固定定位

固定定位的特点

脱离标准流
不随滚动条滚动而滚动，只认浏览器视口





    
    
    Document

新浪案例

注意在这里新浪导航是一张图片头部以及两侧的广告栏使用的是固定定位





    
    
    Document

绝对定位的盒子居中对齐

原理

先移动父元素的一半 left:50%
移动自身宽度的负一半





    
    
    Document

堆叠顺序

使用定位布局时，通常会出现盒子堆叠的情况下，定位的盒子后来居上，z-index可以改变定位的盒子堆叠顺序的问题

1.z-index的值可以是正整数  负整数 0等等。数值越大，盒子越靠上
2.z-index的值不能跟单位，否则不生效





    
    
    Document

定位改变display属性

display是显示模式可以通过以下模式改变display属性

使用inline-block转换行内块显示模式
使用float转换类似行内块显示模式，但是脱离标准流
使用定位模式中的absolute或fixed也可以改变显示模式

通过以上结论得知：加了浮动或绝对定位固定定位就不需要转换显示模式了





    
    
    Document
    



    尧子陌

外边距合并问题

浮动绝对定位（固定定位）都可以改变外边距合并问题





    
    
    Document

圆角矩形设置四个角

注意有顺序，可以简写

淘宝静态轮播图

定位总结

注意事项

left right不能同时使用
top bottom不能同时使用

网页布局的侧边广告栏问题

如何让一个侧边栏靠近版心对齐呢，使用固定定位，走浏览器视口的一半，再走版心的一半+自身的宽度





    
    
    
    Document