Home >Web Front-end >CSS Tutorial >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.
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 left
Attribute sets its position to 50 pixels relative to the .container
element.
position: fixed
position: fixed
The 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!