相对定位就是相对于自己原来的位置 只是内容偏移了而已
并且原有占用的空间依旧存在 不会被其他元素填充
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style type="text/css">
#div{
width: 1000px;
border: 3px solid red;
}
#div div{
width: 200px;
height: 200px;
border: 4px solid;
display: inline-block;
}
/*#div .div1{
position: relative;
left: 230px;
right:100px; 优先级 left>right top>bottom
top:100px;
bottom: 100px;
margin-left:50px;
}*/
/*
问题一
#div .div1{
position: relative;
top:50px;
margin-top: 100px; 这样设置会整体下移 要重新设置对齐方式 vertical-align: top;
}*/
</style>
</head>
<body>
<!--1.什么是相对定位(参考点永远是自身的左上角)
也就是相对于自己在文档流中的位置进行定位。
2.相对定位的几个特性
1.不脱离文档流,原有位置空间被保留
2.不影响元素本身属性的设置
4.如果给元素设置了相对定位胆不设置偏移量,元素本身就不受任何影响的。
-->
<div id="div">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
</div>
<!--注意:
1.如果一个定位元素,同时设置了top和bottom,top的优先级更高,会显示top设置的值。
2.一个定位元素,如果同时设置了left和right,那么优先级取决于网站语言,在英语网页中left优先级更高,在阿拉伯语言的网页中right优先级更高
3.如果一个元素设置了定位(甚至是偏设置了移),其他元素在排版的参考的依然是那个元素的原有位置(没有设置偏移的位置)
4.如果一个元素设置了相对定位,原有位置空间被保留,即使该元素做偏移,其他元素也不会占据他原有(偏移前)的位置。-->
z-index:默认是0;
</body>
</html>