Home Web Front-end HTML Tutorial What are the uses of position in html? Introduction to the usage of position

What are the uses of position in html? Introduction to the usage of position

Sep 18, 2018 pm 04:01 PM
html position

What this article brings to you is what are the uses of position in html? The introduction to the usage of position has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The four attribute values ​​​​of position:

1.relative
2.absolute
3.fixed
4.static
The four attributes are described below. .

<div id="parent">
     <div id="sub1">sub1</div>
     <div id="sub2">sub2</div>
</div>
Copy after login

1. The relative relative attribute is relatively simple. We need to figure out which object it is offset relative to. The answer lies in its location. In the above code, sub1 and sub2 are in a sibling relationship. If you set a relative attribute for sub1, for example, set the following CSS code:

#sub1
{
    position: relative;
    padding: 5px;
    top: 5px;
    left: 5px;
}
Copy after login

We can understand it this way. If the relative attribute is not set, sub1 According to the normal document flow, it should be in a certain position. But when the position of sub1 is set to relative, it will be offset according to its supposed position according to the values ​​​​of top, right, bottom, and left. The "relative" meaning of relative is also reflected in this.
For this, you just need to remember where sub1 should be if it is not set relative, and once it is set, offset it according to where it should be.
The next question is, where is the position of sub2? The answer is where it was before and where it is now. Its position will not change because sub1 adds the position attribute.
What will happen if the position of sub2 is also set to relative at this time? At this time, it is still the same as sub1, offset according to its original position.
Note that the relative offset is based on the upper left side of the object's margin.

2. absolute

Some people always mislead this attribute. It is said that when the position attribute is set to absolute, it is always positioned according to the browser window. This is actually wrong. In fact, this is a characteristic of fixed properties.
When the position of sub1 is set to absolute, who is it used as the object to offset? There are two situations here:

(1) When the parent object of sub1 (or great-grandfather, as long as it is a parent object) parent also sets the position attribute, and the attribute value of position is absolute or relative, also That is to say, if it is not the default value, sub1 will be positioned according to this parent.

Note that although the object has been determined, there are some details that require your attention, that is, which positioning point of the parent should we use to position it? If the parent sets attributes such as margin, border, padding, etc., then this positioning point will ignore the padding and will be positioned from the beginning of the padding (that is, only starting from the upper left corner of the padding), that is, ignoring the padding, of course it will not Ignore margin and border.

The next question is, where is the location of sub2? Because when position is set to absolute, it will cause sub1 to overflow the normal document flow, as if it does not belong to the parent, it floats up. It is called a "layer" in DreamWeaver, but it actually means the same thing. At this time, sub2 will obtain the position of sub1, and its document flow is no longer based on sub1, but starts directly from parent.

(2) If sub1 does not have a parent object with a position attribute, then the body will be used as the positioning object and positioned according to the browser window. This is easier to understand.

3. fixed

fixed is a special absolute, that is, fixed always takes the body as the positioning object and is positioned according to the browser window. Even if the scroll bar is dragged, its position is It won't change. Similar to background-attachment:fixed
Of course, it does not seem to be supported under Dreamweaver

4. The default value of static

position. Generally, when the position attribute is not set, the normal document flow will be followed. Arrange.

The above is the detailed content of What are the uses of position in html? Introduction to the usage of position. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Table Border in HTML Table Border in HTML Sep 04, 2024 pm 04:49 PM

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

Nested Table in HTML Nested Table in HTML Sep 04, 2024 pm 04:49 PM

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

HTML margin-left HTML margin-left Sep 04, 2024 pm 04:48 PM

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

HTML Table Layout HTML Table Layout Sep 04, 2024 pm 04:54 PM

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

Moving Text in HTML Moving Text in HTML Sep 04, 2024 pm 04:45 PM

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

HTML Ordered List HTML Ordered List Sep 04, 2024 pm 04:43 PM

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

How do you parse and process HTML/XML in PHP? How do you parse and process HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

This tutorial demonstrates how to efficiently process XML documents using PHP. XML (eXtensible Markup Language) is a versatile text-based markup language designed for both human readability and machine parsing. It's commonly used for data storage an

HTML onclick Button HTML onclick Button Sep 04, 2024 pm 04:49 PM

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.

See all articles