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

This article mainly introduces how to use relative in CSS. It is very detailed and has certain reference value. Friends who are interested must finish reading it.

First of all, let's take a look at the concept of relative (relative) positioning.

According to the definition on W3C, we can know that 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.

In short, an element box set to relative positioning is offset by a certain distance. The element still retains its unpositioned shape, and the space it originally occupied remains.

After looking at the concept of cssrelative positioning, let's talk about the usage of relative in detail.

For relative positioning in css, we all use this: position:relative

Let's look at an example first.

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

The effect is as follows:

360 screenshot 20181105105914007.jpg

After reading the above example, we probably know a simple use of relative positioning, and then let's take a look at other uses of relative positioning.

The limiting effect of relative on absolute

We know that what absolute locates is that its first ancestor element positioning attribute is not a static attribute. If there is no relative or fixed positioning, adding top/left, right/bottom and other attributes to absolute can be offset, but if you add position:relative to the parent element, the offset ability of absolute is limited by the parent element.

The limiting effect of relative on overflow

Let's look at an example:

.box {

Overflow:hidden

Width:50px

Height:50px

Background-color:#dddddd

}

.son {

Position:absolute

Width:100px

Height:100px

Background-color:#cd0000

}

In this example, the width and height of the .box are both 50px, while the width and height of the .son element are both 100px. Although the .box element sets overflow:hidden, it still does not limit the size of the .son element. Its width and height are both 100px, and when the .box sets the positioning attribute relative, the width and height of the .son element becomes 50px.

The limiting effect of relative on hierarchical z-index

The z-index of the two absolute on the page is different and has its own hierarchy. When the parent class of both absolute has relative, their level depends on the z-index of the parent class relative.

The above is all the contents of the article "how to use relative in CSS". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow 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.