Positioning problems in CSS: absolute positioning, relative positioning, fixed and static

This article brings to you the content is about the CSS positioning problems: absolute positioning, relative positioning, fixed and static, there is a certain reference value, the need for friends can refer to, I hope you have some help.

1. Absolute Positioning (absolute): Positioning from the original position can be positioned using the left right top bottom

HTML code

<! DOCTYPE html>
CSS code:

*{margin:0;padding:0;}. Demo{position:absolute;/*top:100px;left:100px;*/width:100px;height:100px;background-color:red;opacity:0.5;     /* Transparency */}.box{width:150px;height:150px;background-color:green;}
No effect with opsition positioning (p element is block level element, exclusive row)


Plus positioning, no top left effect is set (the demo and box are not at the same level)


Plus top left effect


2. Relative positioning (relative): keep the original position for positioning, you can use the left right top bottom to locate

HTML code:

<! DOCTYPE html>
CSS Code

*{margin:0;padding:0;}. demo{position:relative;/*top:100px;left:100px;*/width:100px;height:100px;background-color:red;opacity:0.5;     /* Transparency */}.box{width:150px;height:150px;background-color:green;}
When you are not using opsition targeting


When using opsition to position without top left


Use opsition to position with top left (keep the original red position, and the upper part is empty)


3.fixed: The element is positioned relative to the browser's window and can be positioned using the left right top bottom

4.static: default value, no positioning, top left etc does not work

Note: When a parent-child element is used for positioning

Absolute: Positioning relative to the nearest targeted parent, without the most relative document positioning
Relative: Positioning relative to your original position

Typically, we use relative as a reference and use absolute for positioning

For example:

<div class= "wrapper" >    <div class= "Demo" >            <div class= "box" ></div>    </div ></div>
Shut up box to locate with reference to the demo

*{margin:0;padding:0;}. Wrapper{margin-left:100px;width:200px;height:200px;background-color:orange;}. demo{position:relative; margin-left:100px;width:100px;height:100px;background-color:red;}. Box{position:absolute;left:50px;width:50px;height:50px;background-color:green;}