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

Today, the editor will share with you the relevant knowledge points about how to use absolute in css. 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. Let's take a look at it.

1 、 absolute

The element that generates absolute positioning is positioned relative to the first parent element other than static positioning. The location of the element is specified by the "left", "top", "right", and "bottom" attributes.

Code example:

Example of using absolute

H4.abs

{

Position:absolute

Left:50px

Top:50px

}

Absolute positioning (absolute)

With absolute positioning, elements can be placed anywhere on the page. In this example, the following elements are 50px from the left and top of the page.

2 、 fixed

Generates an absolutely positioned element, positioned relative to the browser window. The location of the element is specified by the "left", "top", "right", and "bottom" attributes.

Code example:

Example of using fixed

P.a1

{

Position:fixed

Left:10px

Top:10px

}

P.a2

{

Position:fixed

Top:50px

Right:50px

}

Fixed example: this element is relative to the browser window, from the top 10px, from the left 10px

Fixed example: this element is relative to the browser window, from the top 50px, from the right 50px

3 、 relative

The relative positioning element is generated and positioned relative to its normal position. Therefore, "left:20" adds 20 pixels to the LEFT position of the element.

Code usage example:

Relative

H4.le

{

Position:relative

Left:-30px

}

H4.ri

{

Position:relative

Left:40px

}

Elements in normal position

This element moves to the left relative to its normal position

This element moves to the right relative to its normal position

Relative positioning moves the element according to its original position.

In this case, "left:-30px" subtracts 30 pixels from the original left position of the element.

In this case, "left:40px" adds 40 pixels to the original left position of the element.

These are all the contents of the article "how to use absolute in css". 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.