Home Web Front-end CSS Tutorial What does position mean?

What does position mean?

May 14, 2019 am 10:20 AM
position

What does position mean?

#position attributeSpecifies the positioning type of the element. This attribute defines the positioning mechanism used to establish the layout of the element. Any element can be positioned, but absolute or fixed elements generate a block-level box, regardless of the type of the element itself. A relatively positioned element is offset from its default position in normal flow.

Value

static

Default value. There is no special positioning, the object follows HTML positioning rules (ignoring top, bottom, left, right or z-index declarations).

absolute

Drag the object out of the document flow, using left, right, top, bottom and other properties relative to the closest one with the most positioning settings The parent object is positioned absolutely. If no such parent object exists, the body object is used. The cascading defined through the z-index attribute

fixed

is not supported. Object positioning follows the absolute method. However, some specifications must be followed

relative

Objects cannot be stacked, but will be offset in the normal document flow based on left, right, top, bottom and other attributes

Related recommendations: "CSS Tutorial"

The above is the detailed content of What does position mean?. 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

Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 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)

Flexible application skills of position attribute in H5 Flexible application skills of position attribute in H5 Dec 27, 2023 pm 01:05 PM

How to flexibly use the position attribute in H5. In H5 development, the positioning and layout of elements are often involved. At this time, the CSS position property will come into play. The position attribute can control the positioning of elements on the page, including relative positioning, absolute positioning, fixed positioning and sticky positioning. This article will introduce in detail how to flexibly use the position attribute in H5 development.

How to put div at the bottom in html How to put div at the bottom in html Mar 02, 2021 pm 05:44 PM

How to place a div at the bottom of HTML: 1. Use the position attribute to position the div tag relative to the browser window, with the syntax "div{position:fixed;}"; 2. Set the distance to the bottom to 0 to permanently place the div at At the bottom of the page, the syntax is "div{bottom:0;}".

CSS layout property optimization tips: position sticky and flexbox CSS layout property optimization tips: position sticky and flexbox Oct 20, 2023 pm 03:15 PM

CSS layout attribute optimization tips: positionsticky and flexbox In web development, layout is a very important aspect. A good layout structure can improve the user experience and make the page more beautiful and easy to navigate. CSS layout properties are the key to achieving this goal. In this article, I will introduce two commonly used CSS layout property optimization techniques: positionsticky and flexbox, and provide specific code examples. 1. positions

How to use position in h5 How to use position in h5 Dec 26, 2023 pm 01:39 PM

In H5, you can use the position attribute to control the positioning of elements through CSS: 1. Relative positioning, the syntax is "style="position: relative;"; 2. Absolute positioning, the syntax is "style="position: absolute;" "; 3. Fixed positioning, the syntax is "style="position: fixed;" and so on.

What attributes does position have? What attributes does position have? Oct 10, 2023 am 11:18 AM

The position attribute values ​​include static, relative, absolute, fixed, sticky, etc. Detailed introduction: 1. static is the default value of the position attribute, which means that the elements are laid out according to the normal document flow without special positioning. The position of the elements is determined by their order in the HTML document and cannot be passed through top, right, and bottom. Adjust with the left attribute; 2. relative is relative positioning and so on.

Interpretation of CSS cascading properties: z-index and position Interpretation of CSS cascading properties: z-index and position Oct 20, 2023 pm 07:19 PM

Interpretation of CSS cascading properties: z-index and position In CSS, the design of layout and style is very important. In design, it is often necessary to layer and position elements. Two important CSS properties, z-index and position, can help us achieve these needs. This article will dive into these two properties and provide specific code examples. 1. z-index attribute The z-index attribute is used to define the stacking order of elements in the vertical direction. Stacking of elements

HTML layout tips: How to use the position attribute for floating element control HTML layout tips: How to use the position attribute for floating element control Oct 21, 2023 am 09:22 AM

HTML layout skills: How to use the position attribute to control floating elements In web design, layout is a very important part. Through reasonable layout, web pages can be made more beautiful and easy to read, and user experience can be improved. In the process of implementing layout, the control of floating elements is one of the key points. HTML provides the position attribute, through which we can control floating elements. This article will introduce how to use the position attribute to layout floating elements and provide some specific code

Usage and effect display of sticky positioning attribute in CSS Usage and effect display of sticky positioning attribute in CSS Dec 27, 2023 pm 12:08 PM

Application examples of the position attribute in CSS: usage and effects of sticky positioning In front-end development, we often use the position attribute of CSS to control the positioning of elements. Among them, the position attribute has four optional values: static, relative, absolute and fixed. In addition to these common location attributes, there is also a special positioning method, namely sticky positioning. This article will discuss the usage and effects of sticky positioning

See all articles