css中绝对定位中的left和top属性
<html>
<head>
<title>Absolute Position</title>
<style type = "text/css">
/*body具有红⾊边框，宽度300px，⾼度300px*/
body {
border: 1px solid red;
width: 300px;
height: 300px;
}
/
*被绝对定位，颜⾊为silver*/
< {
background: silver;
width: 100px;
height: 100px;
position: absolute;
}
/*没有被绝对定位，有绿⾊边框*/
div.two {
width: 250px;
height: 100px;
border: 2px solid green;
text-align: center;
}
/*被绝对定位，颜⾊为gold*/
div.three {
background:gold;
width: 100px;
height: 100px;
position: absolute;
left: 60px; /*设置了left的值，未设定top*/
}
</style>
css中的position属性</head>
<body>
<div class = "one"></div>
<div class = "two">⽂本div</div>
<div class = "three"></div>
</body>
</html>
css中绝对定位的元素left和top属性受到原来为脱离⽂档流之前的位置的影响，代码如下:
运⾏结果:
从运⾏结果可以看到，gold⾊的div位于绿⾊边框的div下⾯。
这是因为在样式中虽然没有给出gold⾊div框的top的值，但是如果没有被绝对定位，也就是gold⾊的div位于正常流的时候，它将离它现在的包含块(也就是body)上内边距(padding上边界)102px(绿⾊div的⾼100px + 边框宽2px)，因此，虽然top的值未被给出，实际上它的值就是102px。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。