Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use the Position positioning attribute in CSS". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use the Position positioning attribute in CSS.

Detailed explanation of CSS Positioning attribute Position

One of the most commonly used layout class attributes in CSS is Float, and the other is the CSS positioning property Position.

1. Position:static

The default positioning for all elements is: position:static, which means that the element is not positioned and appears in the document where it should be.

In general, you do not need to specify position:static unless you want to override the previously set positioning.

# div-1 {position:static;}

Code effect:

2. Position:relative

If you set position:relative, you can use top,bottom,left and right to move the element relative to where it should appear in the document. [it means that the element actually still occupies its original position in the document, but visually moves relative to its original position in the document]

# div-1 {position:relative; top:20px; left:-40px;}

Code effect:

3. Position:absolute

When position:absolute is specified, the element is separated from the document [that is, it no longer occupies a place in the document] and can be accurately positioned according to the set top,bottom,left and right.

# div-1a {position:absolute; top:0; right:0; width:200px;}

Code effect:

Thank you for your reading, the above is the content of "how to use the Position positioning attributes in CSS". After the study of this article, I believe you have a deeper understanding of how to use the Position positioning attributes in CSS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.