Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you the relevant knowledge of what is the difference between relative and absolute in css position. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Position has the following attributes: static, inherit, fixed, absolute, relative the first three are easy to understand and distinguish: static: is the default state, no positioning, the element appears in the normal flow (ignoring top, bottom, left, right, or z-index declaration). Inherit: inherits the value of the position attribute from the parent element. Fixed: generates absolutely positioned elements that are positioned relative to the browser window. (that is, when you scroll the browser, the element is always fixed somewhere in the visual area of the window).

What is more commonly used and confusing for beginners is absolute and relative. What's the difference between them?

First, let's take a look at the concept given by W3C.

Absolute: an element that generates absolute positioning, relative to the first parent element other than static positioning.

Relative: a relative positioning element is generated and positioned relative to its normal position.

The core difference between the two is that * * absolute is not affected by other elements in the parent element, while relative is affected by other elements in the parent element.

2. The difference between absolute and relative

Enter image description here Code:

Html,body,div,p {

Margin: 0

Padding: 0

}

# baba {

Position: absolute

Left: 50px

Top:50px

Width: 300px

Height: 300px

Background: blue

}

# baba p {

Background:lightblue

}

# erzi {

Position: absolute

Left: 50px

Top:50px

Width: 200px

Height: 200px

Background: yellow

}

Var baba=document.getElementById ("baba")

Erzi=document.getElementById ("erzi")

Baba.children [0] [xss_clean] = "I am" + baba.id

Erzi.children [0] [xss_clean] = "I am" + erzi.id

These are all the contents of the article "what's the difference between relative and absolute in css position". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.