What are css positioning-Front-end Q&A-php.cn

What are css positioning

藏色散人

Release： 2023-01-05 16:07:49

Original

3307 people have browsed it

CSS positioning includes: 1. static, which means static positioning; 2. relative, which means relative positioning; 3. absolute, which means absolute positioning; 4. fixed, which means fixed positioning.

What are css positioning

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

CSS Positioning property allows you to position elements. CSS provides properties for positioning that allow you to create columnar layouts, overlap one part of a layout with another, and accomplish tasks that for years often required the use of multiple tables.

Several ways of css positioning:

1. static (static positioning):

Default value. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations). Refer to the previous essay.

2. Relative (relative positioning):

The element positioned as relative is separated from the normal document flow, but its position in the document flow still exists, but it is visually different from the original position. move.

Position relative to its normal (original) position through the settings of top, bottom, left, and right. Hierarchical grading can be done through z-index.

.static1{
            height:80px;
            background-color: red;
        }
        .relative{
            height:80px;
            position:relative;
            top:40px;
            left:40px;
            background-color: black;
        }
        .static2{
            height:80px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="static1"></div>
    <div class="relative"></div>
    <div class="static2"></div>
</body>

Copy after login

3. Absolute (absolute positioning): Generate absolutely positioned elements and position them relative to the first parent element other than static positioning. The position of the element is specified through the "left", "top", "right" and "bottom" attributes. Hierarchical classification can be done through z-index.

The layer positioned as absolute is separated from the normal document flow, but the difference from relative is that its position in the normal flow no longer exists.

Some people always give misleading information about this attribute. It is said that when the position attribute is set to absolute, it is always positioned according to the browser window. This is actually wrong. In fact, this is a characteristic of fixed properties.

<style type="text/css">
        .static1{
            height:80px;
            background-color: red;
    
        }
        .father{
            height:100px;
            background-color: pink;
            position:relative;
            left:20px;    
        }
        .relative{
            height:80px;
            width:80px;
            position:absolute;
            top:10px;
            left:10px;
        
            background-color: black;
        }
        .static2{
            height:80px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="static1"></div>
    <div class="father">
        <div class="relative"></div>
    </div>
    <div class="static2"></div>

Copy after login

4. Fixed (fixed positioning): Generate absolutely positioned elements and position them relative to the browser window. The position of the element is specified through the "left", "top", "right" and "bottom" attributes. Hierarchical classification can be done through z-index.

<style type="text/css">
        .static1{
            height:80px;
            background-color: red;
    
        }
        .father{
            height:100px;
            width:300px;
            background-color: pink;            
            left:100px;    
            top:100px;
        }
        .relative{
            height:80px;
            width:80px;
            position:fixed;
            left:20px;        
            background-color: black;
        }
        .static2{
            height:80px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="static1"></div>
    <div class="father">
        <div class="relative"></div>
    </div>
    <div class="static2"></div>

Copy after login

【Recommended learning: css video tutorial】

The above is the detailed content of What are css positioning. For more information, please follow other related articles on the PHP Chinese website!