


Position attribute absolute and relative horizontal centering in css style
First we need to understand these two positionings in the style;
absolute (absolute positioning): drag the assigned object out of the document flow, and use left, right, top, bottom and other attributes to relative Perform absolute positioning on the closest parent object with positioning settings. If the parent does not have positioning attributes set, it will be set according to the default rules (positioning based on the upper left corner of the body as a reference). At the same time, the absolutely positioned object can cascade.
relative (relative positioning): Objects cannot overlap. Use left, right, top, bottom and other attributes to position them in the normal document flow. Their objects cannot be cascaded.
Centering:
1. In order to achieve the effect of adaptive centering for objects that use absolute positioning, the width of the object must be set; for example, the following code implements centering
.ceshi { position:absolute; bottom: 10%; display: block; width: 250px; left:50%; margin-left:-125px; }
2. For the object that uses relative positioning to achieve the centering effect, because it is in the normal document flow, its reference object is itself, and you can set it as follows:
.ceshi2 { margin:0 auto; }
The above is the detailed content of Position attribute absolute and relative horizontal centering in css style. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics











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.

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 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;}".

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.

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.

How to clear position in css: 1. Use the static attribute, which can be set to static to clear the position attribute; 2. Use the inherit attribute to clear the position attribute of the element and inherit the position attribute of the parent element; 3. Use the unset attribute, Restore the attributes to their default values and clear the position attribute of the element; 4. Use the !important rule, which will override other style rules and clear the position attribute, etc.

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

Common application scenarios of the position attribute in H5 development require specific code examples. In H5 development, the position attribute of CSS is very important. It controls the positioning of elements in the web page. By properly applying the position attribute, we can achieve flexibility and beauty in page layout. In this article, we will introduce common application scenarios of the position attribute and illustrate them with specific code examples. Static (static positioning): The default value of the position attribute is st
