left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
html:
<pre>
<div class="fancy">hello MDN</div>
<div class="fancy2"></div>
</pre>
style.css
<pre>
.fancy{
text-align: center;
box-sizing: border-box;
width: 200px;
height: 200px;
position: relative;
background-color: #A4C9CF;
}
.fancy2{
width: 100px;
height: 100px;
left:100px;
position:absolute;
background-color: aqua;
}
</pre>
left必须和position一起用。
效果：
image.png
当position：absolute时是以第一个父元素为标准，与左边的距离，为正向右偏，负数左边偏离。
当position：relative时是以正常定位为标准，与左边的距离，为正向右偏，负数左边偏离。
网友评论