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

Today Xiaobian to share with you how to use the relative attribute in CSS to achieve relative positioning of the relevant knowledge points, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you have something to gain after reading this article, let's take a look at it.

CSS relative relative positioning

Element boxes set to relative positioning are offset by a distance. The element still retains its unpositioned shape, and the space it originally occupied remains.

CSS relative positioning

Relative positioning is a very easy concept to grasp. If an element is relatively positioned, it will appear at its location. You can then move the element "relative to" its starting point by setting the vertical or horizontal position.

If top is set to 20px, the box will be 20 pixels below the top of the original location. If left is set to 30 pixels, 30 pixels of space is created on the left side of the element, that is, the element is moved to the right.

# box_relative {position: relative; left: 30px; top: 20px;}

As shown in the following figure:

Note that when using relative positioning, the element still occupies the original space, regardless of whether it is moved or not. Therefore, moving the element causes it to overwrite other boxes.

CSS relative positioning instance

H3.pos_left {position:relative; left:-20px} h3.pos_right {position:relative; left:20px} this is the title in the normal position, the title moves to the left relative to its normal position, the title moves to the right relative to its normal position.

Relative positioning moves the element according to its original position.

The style "left:-20px" subtracts 20 pixels from the original left position of the element.

The style "left:20px" adds 20 pixels to the original left position of the element.

These are all the contents of the article "how to use the relative attribute to achieve relative positioning 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.