Analysis of CSS absolute positioning properties: absolute and fixed

CSS absolute positioning attribute analysis: absolute and fixed

Absolute positioning is a common and useful layout technology in CSS, by using position: absolute or position: fixed attribute, which can detach an element from the normal document flow and position it relative to its containing element. This article will analyze the two absolute positioning properties of absolute and fixed in detail and provide specific code examples.

1. position: absolute

The position: absolute property positions an element relative to its nearest positioned ancestor element , if the ancestor element is not positioned, it is positioned relative to the root element of the document.

Basic syntax:

position: absolute;
top: 像素值/百分比值;
left: 像素值/百分比值;
right: 像素值/百分比值;
bottom: 像素值/百分比值;

Code example:

<style>
    .container {
        position: relative;
        width: 300px;
        height: 200px;
        background-color: lightblue;
    }
    
    .box {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

<div class="container">
    <div class="box"></div>
</div>

In the above example, we created a container element .container and positioned it The mode is set to position: relative. Then, create a .box element inside the container and set its positioning mode to position: absolute, passing top and leftAttribute sets its position to 50 pixels relative to the .container element.

2. position: fixed

position: fixedThe attribute positions the element relative to the viewport, regardless of the The scroll bar changes its position as it scrolls.

Basic syntax:

position: fixed;
top: 像素值/百分比值;
left: 像素值/百分比值;
right: 像素值/百分比值;
bottom: 像素值/百分比值;

Code example:

<style>
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background-color: lightblue;
    }
    
    .container {
        height: 1000px;
        background-color: lightgray;
    }
</style>

<div class="header">
    <h1>固定头部</h1>
</div>

<div class="container">
    <!-- 页面内容 -->
</div>

In the above example, we created a .header element and positioned it as Set to position: fixed, and set its position to the upper left corner of the viewport through the top and left properties. In this way, the .header element will always be displayed at the top of the page and will not be affected by scrolling.

It should be noted that absolutely positioned elements need to have relatively positioned ancestor elements as a reference, while fixedly positioned elements are positioned relative to the viewport.

The absolute positioning attribute is one of the important tools for implementing layout in CSS, which can help us achieve a more flexible and precise page layout. Mastering the usage of position: absolute and position: fixed, we can better control the position and behavior of page elements.

To summarize, position: absolute positions the element relative to the nearest positioned ancestor element, while position: fixed positions the element relative to the viewport. These two attributes are widely used in front-end development and provide convenience for us to achieve various layout effects.

The above is the detailed content of Analysis of CSS absolute positioning properties: absolute and fixed. For more information, please follow other related articles on the PHP Chinese website!