Difference and usage of position: relative and position: absolute, relativeabsolute

Difference and usage of position: relative and position: absolute, relativeabsolute

In the past few days, when a project is created with the tab function, the background color of the title and content area is different. When you need to select the current title, the lower border and the small triangle border appear under the title, this will overwrite the following content area if the title background color is exceeded. In this case, you need to use the potition: absolute attribute.

As shown in:

DOM structure:

<Div class = "active">
<Div class = "active_t">
<Ul id = "active_list" class = "active_list clearfix">
<Li class = "activeCur">
<H2> Activity 1 <H4> January 1, October 30 ~ November 20 </Li>
<Li>
<H2> Activity 1 <H4> January 1, October 30 ~ November 20 </Li>
</Ul>
</Div>
</Div>

<! -- Content region -->

<Div class = "active_c">
<Div class = "active_c_c">

// Content in the content area

</Div>

</Div>

The style is as follows:

. Active {
Height: 79px;
Border-bottom: solid 1px # e3ecef;
Position: relative;
Z-index: 0;
Width: 1110px;
Margin: 0 auto;
Padding: 0 0 0 60px;
}
. Active. active_t {
Position: absolute;
Margin: 0px auto;
}
. Active. active_t ul. active_list {
Padding-top: 15px;
Margin-left:-78px;
}
. Active. active_t ul. active_list li {
Float: left;
Color: # ccc;
Margin-left: 78px;
Height: 71px;
Cursor: pointer;
}
. Active. active_t ul. active_list li h2 {
Font-size: 28px;
Line-height: 40px;
Font-weight: normal;
}
. Active. active_t ul. active_list li h4 {
Font-size: 14px;
Line-height: 24px;
Font-weight: normal;
}
. Active. active_t ul. active_list li. activeCur {
Position: relative;
Z-index: 999;
Color: #00 addc;
Background: url ("../images/active_list.png") no-repeat 0px 63px;
}
. Active_c {
Background: # eaf4f6;
Overflow: hidden;
Clear: both;
}
. Active_c. active_c_c {
Width: 1080px;
Padding: 35px 45px;
Margin: 0px auto;
Overflow: hidden;
}

Summary:

The outermost active background color is white. You can set the outermost background width to 1170 regardless of the background color, it may be necessary to set another layer without fixed width ,)

In fact, it is to set the active position: relative. This is an unfixed width div with a white background color, and active_t is an inner layer with a width of 1170, then, set the li height to 71px, and the overall active height to 79px. The bottom Bottom Frame and the degree of the small triangle are 8px, And the ul has the 15px padding-top, originally 79-15 = 64px, but the height of the lower border plus the small triangle is 7px, So 64 + 7 = 71, that is, the li height is 71px.

Position: relative and position: absolute in CSS are different.

Position: absolute. This is absolute positioning;
Is relative to the browser positioning.
For example, position: absolute; left: 20px; top: 80px; the container is always located at the position 20px left of the browser and 80 PX away from the browser.

Position: relative is relative positioning, which is relative to the previous container positioning. In this case, the top left cannot be used for positioning. Margin should be used.

For example: <div class = "1"> </div> <div class = "2"> </div>

When 1 is fixed. 1 style float: left; width: 100px; height: 800px;
The Style 2 is float: left; position: relative; margin-left: 20px; width: 50px;
2 is located at the right of 1, PX away

In div, how do I use position: relative in full?

There is no complete usage, and various attributes can be used flexibly only according to different needs.

Position: relative is generally set to the parent layer of position: absolute; in daily applications,
Parent position: relative; Sub-layer position: absolute; the position is located according to the parent layer boundary. Otherwise, position: absolute searches for the element boundary with position: relative set layer by layer, until the body element ..

W3school.com.cn/css/css_positioning.asp