admin管理员组文章数量:1611525
position:relative
作用:是元素成为containing-block,可定位的祖先元素。意思就是绝对定位是的参照元素
特点:
-
可以使用top|right|bottom|left|z-index进行相对定位,相对的是常规流中自己的位置。
-
相对定位元素不会离开常规流,意思就是其原来的位置还在,不会被其他后面的元素占有
-
任何元素都可以设置为relative,他的绝对定位的后代可以相对于他进行绝对定位
-
也能使浮动的元素发生偏移,并控制他们的堆叠顺序(z-index)
案例一(对第一和第二个特点进行解释)
有三个div,以常规流的方式排列。
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
.box{
height: 200px;
width: 200px;
border: 2px solid;
}
现在对第二个盒子加相对定位
.box:nth-child(2){
position:relative;
left: 200px;
border-color: red;
}
效果:
可以看出第二个盒子盒子相对于自己原来的位置进行了left:10px; 并且原来的空间还在那,并没有被下面的元素所代替。
案例二(第三个特点)
在一个父类(parent类)div里面嵌套一个字类(child类)div
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
*{
margin: 0;
padding: 0;
}
.parent{
height: 500px;
width: 500px;
border: 2px solid;
position: relative;
margin: 0 auto;
}
.child{
height: 200px;
width: 200px;
position:absolute;
left: 20px;
border-color: peachpuff;
background-color: salmon;
}
效果图:
外面的div加了个relation,里面的加了给absolution、left:10px,里面的div相对于父div向右移了10px
案例三(解释第四个特点,也能使浮动的元素发生偏移,并控制他们的堆叠顺序(z-index))
这个案例使两个浮动的水平相邻的div重叠,并且运用z-index属性控制谁在上面谁在下面,注意:两个div都要加position:relative
效果:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 200px;
border: 1px skyblue solid;
float: left;
text-align: center;
line-height: 200px;
z-index: 9;
position: relative;
}
.box2{
width: 200px;
height: 200px;
border: 1px darkkhaki solid;
float: left;
position: relative;
left: -201px;
text-align: center;
line-height: 200px;
z-index: 1;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
版权声明:本文标题:position之relative 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1728603795a1165192.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论