position:relative
1.当将块的position属性设置为relative时,与设置为absolute完全不同,这时子块是相对于其父块来作为参照对象偏移定位,而不是相对于浏览器窗口,并且相对定位的块元素脱离标准流浮上来后,无论是否进行移动,其所占的位置仍然留有空位,后面的无定位块元素不会移动上来,因此,移动元素会导致覆盖其它框。<!DOCTYPE html><html lang="en">..
·
1.当将块的position属性设置为relative时,与设置为absolute完全不同,这时子块是相对于他原本的位置定位,无论是否进行移动,其所占的位置仍然留有空位,后面的无定位块元素不会移动上来,因此,移动元素会导致覆盖其它框。若相对本身向上或向左的话要设置top,left为负值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#div1 {
width: 455px;
height: 200px;
background-color: rgb(187, 255, 0);
position: relative;
top: 40px;
left: 60px;
}
#div2 {
width: 455px;
height: 200px;
background-color: rgba(255, 59, 141, 0.685);
}
</style>
</head>
<body>
<div id="div1">我是div1</div>
<div id="div2">我是div2</div>
</body>
</html>
---------------------
作者:我本浪人–游吟世间
来源:CSDN
原文:https://blog.csdn.net/qq_41760521/article/details/91797236
更多推荐
所有评论(0)