Summary of positioning in CSS

Posted: 2020-03-20 14:25:20 Author: Now_Sprouting I want to comment

CSS positioning has four different roles in different scenarios, this article gives you an introduction to the relevant knowledge of CSS positioning, through the example code screenshot to introduce you in great detail, for everyone's study or work has a certain reference value, the need for friends to refer to it

There are four types of positioning in CSS that have different roles in different scenarios. Let me briefly introduce these four types of positioning.

static Static location: This section does not describe the application scenarios

The following mainly introduces the other three common positioning

relative positioning: As the name suggests, relative positioning is to make corresponding changes to the original position of the element, it should be noted that: the element will occupy the original position after moving (this is the most important point of relative positioning).

Here is the code demo:

<style> * { margin: 0; padding: 0; /* Here all margins and margins are cleared, no real meaning, just easy to observe */}.pink {width: 80px; height: 80px; background-color: pink; } .purple { width: 80px; height: 80px; background-color: purple; } .green { width: 80px; height: 80px; background-color: greenyellow } </style>

Three divs are defined and given corresponding colors. The result is as follows

在这里插入图片描述

When giving subboxes the following positioning properties

.purple { position: relative; top: 0; left: 80px; /* Above adds relative positioning to the box and moves it 80px relative to itself */ width: 80px; height: 80px; background-color: purple; }

在这里插入图片描述

The page looks like this, which proves the most important point - when the element moves, it will take its place or the green box will go up

2.ponsition:absolute positioning is the position change made by the parent element. If the parent element has the position attribute, the corresponding move is made based on the parent element; if the parent element has no position attribute (or no parent element), the corresponding move is made based on the browser Move. It is important to note that the element does not occupy its original position after being moved. The following is a code demonstration

.purple { position: absolute; top: 160; left: 80px; /* The purple box here has no parent element so it is positioned at the browser level */ width: 80px; height: 80px; background-color: purple; }

在这里插入图片描述

Obviously the green box is on top, and this results in absolute positioning: the element does not occupy its original position after being moved.

3.fixed fixed positioning: The position of fixed positioning is relative to the position of the entire page, regardless of whether there is a parent element, similarly, fixed positioning does not retain the position

Sum up

This article about the summary of positioning in CSS is introduced to this, more related to the positioning content in css please search the previous articles of Script House or continue to browse the following related articles, I hope you will support Script House in the future!

Tag: Locate the css

CSS Positioning layout (position, positioning layout tips)

Position of CSS properties, the position has four values: absolute/relative/fixed/static (absolute/relative/fixed/static (default)) by positioning properties can be set up some irregular layout, use the TLBR (top, left, bottom, r
2020-03-22
css3 transform Method that causes the fixed positioning of the child element to become absolute positioning

This article mainly introduces the method that css3 transform causes the fixed positioning of child elements to become absolute positioning. The article introduces it in great detail through the example code, which has certain reference value for everyone's study or work
2020-03-06
Describes the hierarchy problems caused by the css positioning position

This article mainly introduces the detailed explanation of the hierarchical relationship problem caused by css positioning position, the article introduces it in great detail through the example code, which has certain reference value for everyone's study or work, and the friends who need to follow the Xiaobian below
2020-02-10
Learn more about how to use positioning in CSS (Summary)

This article mainly introduces how to use positioning in in-depth learning CSS (summary), the article introduces very detailed through the example code, which has certain reference learning value for everyone's study or work, and the friends who need to learn together with Xiaobian below
2019-12-30
Detail css sticky position: sticky problem

This article mainly introduces the details of css sticky positioning position: sticky problem mining relevant information, the article through the example code is introduced in great detail, for everyone's study or work has a certain reference learning value, the need of friends
2019-08-26
Describes the differences between the four positioning methods in the CSS

This article mainly introduces the difference between the four kinds of positioning in CSS. This article introduces you in great detail through the combination of examples and pictures. It has certain reference value for your study or work
2020-07-23