Home > Article > Web Front-end > What does position mean in css? What are its values and functions? (Summarize)

What does position mean in css? What are its values and functions? (Summarize)

藏色散人Original: 2018-10-16 13:44:258559browse

This article mainly introduces to you what position means in css, and the function of all values.

For those who are learning front-end development, the position attribute in css is crucial. Simply put, position in CSS means specifying the positioning type of an element.

So what are the attribute values of position? That is, What are the positioning types in css?

Below we will use a simple code example to summarize and introduce the value of position and its function.

1. Absolute

Generate absolutely positioned elements, positioned relative to the first parent element other than static positioning. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.

Code example:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>absolute使用示例</title>
<head>
    <style>
        h3.abs
        {
            position:absolute;
            left:50px;
            top:50px
        }
 </style>
</head>
<body>
<h3 class="abs">绝对定位（absolute）</h3>
<p>通过绝对定位，元素可以放置到页面上的任何位置。本例中下面元素距离页面左侧和顶部都是50px。</p>
</body>
</html>

The code effect is as follows:

What does position mean in css? What are its values and functions? (Summarize)

2, fixed

Generate absolutely positioned elements, positioned relative to the browser window. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.

Code example:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>fixed使用示例</title>
<head>
    <style>
        p.a1
        {
            position:fixed;
            left:10px;
            top:10px;
        }
        p.a2
        {
            position:fixed;
            top:50px;
            right:50px;
        }
 </style>
</head>
<body>
<p class="a1">fixed示例：此段元素相对于浏览器窗口，距离顶部10px，距离左边10px;</p>
<p class="a2">fixed示例：此段元素相对于浏览器窗口，距离顶部50px，距离右边50px;</p>
</body>
</html>

The code effect is as follows:

What does position mean in css? What are its values and functions? (Summarize)

3, relative

Generate relatively positioned elements, positioned relative to their normal position. Therefore, "left:20" adds 20 pixels to the element's LEFT position.

Code usage example:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>relative</title>
<head>
    <style>
        h3.le
        {
            position:relative;
            left:-30px
        }
        h3.ri
        {
            position:relative;
            left:40px
        }
 </style>
</head>
<body>
<h3>正常位置的元素</h3>
<h3 class="le">这个元素相对于其正常位置向左移动</h3>
<h3 class="ri">这个元素相对于其正常位置向右移动</h3>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>本例中"left:-30px"，从元素的原始左侧位置减去 30 像素。</p>
<p>本例中"left:40px"，向元素的原始左侧位置增加 40 像素。</p>

</body>
</html>

The effect is as follows:

What does position mean in css? What are its values and functions? (Summarize)

##4, static

default value. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations).

5. inherit

specifies that the value of the position attribute should be inherited from the parent element.

This article is a summary of the relevant knowledge about the position attribute in CSS. I hope it will be helpful to friends in need.

If you want to learn more about front-end related knowledge, you can follow the PHP Chinese website

css video tutorial, Bootstrap tutorial and other related front-end tutorials. Everyone is welcome to learn and refer to it!

The above is the detailed content of What does position mean in css? What are its values and functions? (Summarize). For more information, please follow other related articles on the PHP Chinese website!

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：Example code for making a simple drop-down menu using HTML+CSSNext article：Example code for making a simple drop-down menu using HTML+CSS

See more

What does position mean in css? What are its values ​​and functions? (Summarize)

Related articles

What does position mean in css? What are its values and functions? (Summarize)