CSS positioning and application scenario analysis

We all know that when developing web pages, sometimes we can achieve good results by flexibly using the CSS positioning postion attribute for layout. In this article, we summarized the position knowledge points and commonly used places, hoping to help Friends who learn css can refer to it.

<script>ec(2);</script>

First we explain the postion attribute in detail.

In CSS3, postion is described like this

The summary is as follows:
static is the default layout, set top\left. . Properties will have no effect.
relative is a relative layout, set top\left. . Will be relative to the control in the file.
Absolute is absolute positioning, set top\left. . Will depend on the entire page.
fixed is positioned relative to the browser window, and the set top/left attributes are relative to the position of the browser window.

In addition, after testing my code:
1. If top\left. . The position of one of the default, absolute, and fixed layout properties will change relative to the position of the parent control.
2.relative relative positioning, if there is a parent control, the relative position is the nearest parent control, not the nearest parent control on the same layer. Followed by brother controls.
3.static has no effect on other covering layers.

Then let’s prove the above conclusion through code:

Case 1

HTML:

<p id="zero">
            <p id="one">one</p>
            <p id="two">two</p>
            <p id="tree">tree</p>
</p>

CSS:

　　　　　　  #zero{
                width:200px;
                height: 200px;
                margin: 100px 500px;
                background: black;
    
                z-index: 0;
            }
            #one{
                width: 100px;
                height: 100px;
                position: relative;
                top: 50px;
                left:20px;
                background: red;
                z-index: 1;
            }
            #two{
                width: 100px;
                height: 100px;
                position: absolute;
                top: 190px;
                
                background: yellow;
                z-index: 2;
            }
            #tree{
                width: 100px;
                height: 100px;
                position: fixed;
                top: 250px;
                left: 600px;
                background: deepskyblue;
                z-index: 3;
            }

Here you can see that p with id one is the layout relative to the parent control.

Case 2:

CSS:

                                                                                                             #                                                                         

#It can be seen from here that when relative positioning is relative to the nearest parent control, not the same layer parent control.



Case 3: If there is no parent p:

HTML

       
               #first{
               width: 200px;
                height: 200px;
                background: black;
                margin-top: 100px;
                z-index: 1;
            }
            #second{
                margin-top: 10px;
                margin-left:10px;
                width: 150px;
                height: 150px;
                background: yellow;
                z-index:2;
            }
            #thrid{
                width: 100px;
                height: 100px;
                position:relative;
                background: red;
                top: 30px;
                left: 30px;
                z-index: 1;
            }

CSS

<p id="out"></p>
<p id="out1"></p>

Through this situation, it can be seen that if there is no parent control, the relative positioning is relative to the sibling control.

Description of z-index in CSS3

Common applications in position development

1. Floating windows on both sides of the web page (player, top button, floating advertisement, function button etc.)

2. The navigation bar floats to the top.
3. Hide p to realize the pop-up window function (control the position and appearance of p by setting the positioning and z-index of p)

Among them, 1 and 3 are relatively simple. This can be achieved by setting position=fixed, top left, and z-index, which will not be explained here

Case 2:

Judge the position of the scroll bar by calling the js function, exceeding the navigation When the height of the bar from the top is set, set position to fix to fix the position of the navigation bar. Otherwise, position is static, and maring and other attributes remain unchanged.

JS:


　

 #out{
                margin-top: 50px;
                width: 200px;
                height: 200px;
                background: black;
                z-index: 1;
            }
            
            #out1{
                width: 200px;
                height: 200px;
                background: yellow;
                position: relative;
                z-index: 3;
                top:10px;
            }

HTML:


　

　var mt = 0;
        window.onload = function () {
            var myp = document.getElementById("myp");
            var mt = myp.offsetTop;
            window.onscroll = function () {
                var t = document.documentElement.scrollTop || document.body.scrollTop;
                if (t > mt) {
                    myp.style.position = "fixed";
                    myp.style.margin = "0";
                    myp.style.top = "0";
                }
                else {
                    myp.style.margin = "30px 0";
                    myp.style.position = "static";
                }
            }        
        }

Set appropriately CSS to control the style you want.
Related recommendations:

About the position attribute in css

Comparison of css float attribute and position:absolute

css: The use and definition of list-style-position

The above is the detailed content of CSS positioning and application scenario analysis. For more information, please follow other related articles on the PHP Chinese website!