There are four different positioning methods for the position property, namely static, fixed, relative, absolute.
position:static
Static positioning is the default for HTML elements, i.e. without positioning, the element appears in the normal flow. Therefore, this positioning will not be affected by top, bottom, left, and right.
<div class="wrap"> <div class="content"></div> </div>
.wrap{height: 200px;width: 200px;background-color: #ddd;}
.content{height: 80px;width: 80px;background-color: rgb(228,183,41);position: static;top: 20px;left: 20px;}
position:fixed
Fixed positioning means that the position of the element is fixed relative to the browser window, even if the window is scrolled, it will not scroll, and fixed positioning makes the position of the element independent of the document flow, so it does not occupy space, so it will happen with other elements. overlapping.
<div class="wrap"> <div class="content"></div> </div>
.wrap{height: 1200px;background-color: #ddd;}
.content{height: 200px;width: 200px;background-color: rgb(228,183,41);position: fixed;bottom: 0px;right: 0px;}
fixed positioning needs to be described under IE7 and IE8! DOCTYPE to support
position:relative
A relatively positioned element is positioned relative to its own normal position.
<h2>Normal heading position. </h2> <h2 class="pos_bottom">position: Relative title position. </h2> <h2 class="pos_left">position: Relative title position. </h2>
.pos_bottom{position: relative;bottom: -15px;}
.pos_left{position: relative;left: 30px;}
That is, it can be understood as: after the movement is the negative position before the movement.
That is: after moving relative to before moving: if the value is negative, it is directly converted to an integer; if the value is an integer, the direction is directly changed.
position:absolute
Absolutely positioned elements are relative to the nearest positioned parent, or relative to <html> if the element has no positioned parent.
<div class="wrap"> <div class="content"> <span>I am here</span> </div> </div>
.wrap{height: 400px;width: 400px;background-color: #ddd;}
.content{height: 200px;width: 200px;background-color: rgb(228,183,41);}
span{position: absolute;right: 80px;background-color: red;}
Only set position: absolute in the span, the effect is as follows:
Set position: absolute/fixed/relative in .content, the effect is as follows:
Set position: absolute/fixed/relative in .wrap, the effect is as follows:
Therefore, when the parent element of an absolute positioning element has position:absolute/fixed/relative, the positioning element will be positioned according to the parent element, and the parent element does not have the position attribute or the default attribute is set, then the positioning attribute will be based on the html element. position.