search

Home >Web Front-end >CSS Tutorial >How to use CSS relative? Detailed explanation of the usage of relative positioning in CSS

How to use CSS relative? Detailed explanation of the usage of relative positioning in CSS

不言
不言Original
2018-11-05 13:36:2111324browse

There are four attribute values ​​​​in the position attribute of css: static (static), relative (relative), fixed (fixed), absolute (absolute). Today’s article will introduce it to you. The usage of relative positioning in CSS. Without further ado, let’s take a look at how to use relative in CSS.

First of all, let’s take a brief look at the concept of 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 positioned relatively, it will appear where it is. You can then move the element "relative to" its origin by setting a vertical or horizontal position.

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

After reading the concept of css relative (relative) positioning, let’s talk about the usage of relative in detail

We all use relative positioning in css this way ：position: relative;

Let’s take a look at an example first

<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
</body>
</html>

The effect is as follows:

How to use CSS relative? Detailed explanation of the usage of relative positioning in CSS

Finished reading In the above example, we roughly know a simple usage of relative positioning. Next, let's take a look at other uses of relative positioning.

The restrictive effect of relative on absolute

We know that absolute positions the first ancestor element whose positioning attribute is not a static attribute. If there is no relative or fixed positioning In the case of absolute, adding top/left, right/bottom and other attributes to absolute can cause offset. However, if position: relative is added to the parent element, absolute's offset ability is limited by the parent element.

The limiting effect of relative on overflow

Let’s take a look at an example: 

<div class="box">
    <div class="son"></div></div>
    <div class="box" style="position: relative">
    <div class="son"></div></div>
.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 of .box and The height is 50px, and the width and height of the .son element are both 100px. Although the .box element is set with overflow:hidden, it still cannot limit the size of the .son element. Its width and height are both 100px, and when .box is set After setting the relative positioning attribute, the width and height of the .son element become 50px.

relative’s limiting effect on hierarchical z-index

The two absolutes in the page have different z-indexes and have their own levels. When the two absolutes When the parent class has a relative, their hierarchy depends on the relative z-index of the parent class.

The above is the entire content of this article. For more details about relative positioning of css, you can pay attention to css video tutorial for further learning.

The above is the detailed content of How to use CSS relative? Detailed explanation of the usage of relative positioning in CSS. For more information, please follow other related articles on the PHP Chinese website!

css Static 父类 position overflow
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：What can linear-gradient() do in css? Use of linear-gradient()Next article：What can linear-gradient() do in css? Use of linear-gradient()

Related articles

See more