css relative

一、relative和absolute相煎关系

relative限制absolute

1、限制left/top/right/bottom定位

　　如果父元素有relative，只能根据父元素进行定位

2、限制z-index层级

　　如果relative有z-index，absolute的z-index失效

3、限制在overflow下的嚣张气焰

　　overflow:hidden是防止不了absolute的溢出的。但是配合relative的overflow是可以防止溢出的

relative限制fixed: 只能限制z-index层级

二、relative和定位

两个特性

1、相对自身

left:0,top:0相对自身。其实就是纹丝不动。

relative配合margin定位

<style>
　　div{
　　　　width: 300px;
　　　　height: 50px;
　　　　background: #eee;
　　　　margin-top:20px;
　　}
</style>
<body>
　　<div></div>
　　<div style="position:relative; margin-top:-30px; background: red;"></div>
　　<div></div>
</body>

后面的元素会跟上去，若不是margin-top，而是top

<style>
　　div{
　　　　width: 300px;
　　　　height: 50px;
　　　　background: #eee;
　　　　margin-top:20px;
　　}
</style>
<body>
　　<div></div>
　　<div style="position:relative; top:-30px; background: red;"></div>
　　<div></div>
</body>

第三个元素纹丝不动。

2、无侵入

不会影响其他布局，自己怎么定，其它元素纹丝不动

应用：自定义拖拽

3、top/bottom和left/right对立属性同时存在时的表现是？

绝对定位是拉伸，相对定位是斗争。怎么斗争。如果先设置了top，bottom无效。如果先设置了left，right无效

<style>
　　div{
　　　　width: 300px;
　　　　height: 50px;
　　　　background: #eee;
　　　　margin-top:20px;
　　}
</style>
<body>
　　<div></div>
　　<div style="position:relative; top:-30px; bottom:30px; background: red;"></div>
　　<div></div>
</body>

执行的是top:－30px。先设置者优先，而不是覆盖。

三、relative和层级

1、提高层迭上下文

　　在没有其它外力作用下，一般都是后面的元素覆盖前面的。但是想前面的上前。前面的配合z-index就能起作用。单独的z-index是无效的

2、新建层叠上下文与层级控制

　　relative+z-index:auto，不会限制absolute，默认是auto的（不包括ie6,7）

四、relative的最小化影响准则

尽量降低relative属性对其他元素或布局的潜在影响！

1、尽量避免使用relative

　　比如很多图片中的一张想要绝对定位到最上面，最外面的容器不要设置absolute。这样里面不会出现层叠的情况

2、relative最小化

　　在最外层用relative，如果里面还有relative，就会出现问题，可以将要移位的单独用relative包一层

猜你喜欢