I don’t know, programmers who watch me write front-end knowledge, do they feel the same as me? Every time I finish writing the html structure and then write the css style content, I have a certain feeling in my mind, but after implementation , ctrl+save is really different, I feel really unhappy.
For position this attribute, every time I set it, I will be more or less surprised.
I have been interviewed two or three times, but I was not asked this question, so I still felt lucky.
#position
This attribute has a total of four values.static staticPositioning
Default layout. If it is a block-level element, it will be stacked from top to bottom on the page. If it is an inline element, it will continue from left to right in one line. If it cannot fit, it will wrap to another line. If it does, it will continue.relative Relative positioning
Causes the element to be positioned relative to its original position in the document. Change its position through the four attribute values top, left, bottom, and left.
The above is easy to understand.
“ It’s hard to understand here: relative positioning of an element will retain the document flow space originally occupied by the element. When relative positioning of the element, such as top: 20px; makes the element The distance is 20px from the top of the space it originally occupied, which means that the element has moved down 20px, but other than the element moving a certain distance, no other elements on the page have changed. ”-
absolute Absolute positioning
Absolute positioning will be completely taken out of the document flow, and the space previously occupied by the element will also be recycled. Absolutely positioned elements are positioned based on their positioning context.
It should be noted that: It is written here that absolute positioning can transform inline elements into block-level elements. But the certainty is that once the inline element is absolutely positioned, the position of the element is difficult to grasp (reason: if the element does not have inner and outer margins , and there are no absolutely positioned elements before, after, left, and right, then the element It will temporarily stay at its original position, but if the element is set with margins, then the element will temporarily stay at a distance of one margin from the original position. It will look for the top element that is not absolutely positioned.) Therefore, if you set absolute positioning, you need to position the top and left of the element immediately. Understanding of positioning context:
Move the position of the positioning element relative to another element, then "another element" is the positioning context of the element.
Any ancestor element of an absolutely positioned element can become its positioning context. Just set the corresponding ancestor element to position:relative;.
If none of its ancestor elements has relative positioning set, the default positioning context of the absolute element is body. #fixed Fixed positioning
Absolute positioning also completely removes the document flow. But its positioning context is the viewport, which is the browser window.
Fixed positioning is not commonly used. The most common situation is to use it to create navigation that does not move with the scrolling of the web page.
When I am doing exercises, the most accustomed thing is to relative position the parent element, and then absolute position the child elements that need to be positioned.
Although some web pages also have the absolute positioning of the parent element, and the child element is absolutely positioned relative to the parent element, I don't like writing it this way, because the position of the parent element needs to be positioned again.
【Related recommendations】
1. Free css online video tutorial
3. php.cn Dugu Jiujian (2)-css video tutorial
The above is the detailed content of Learn more about the position property in css. For more information, please follow other related articles on the PHP Chinese website!

The idea behind most of web applications is to fetch data from the database and present it to the user in the best possible way. When we deal with data there

Let's do a little step-by-step of a situation where you can't quite do what seems to make sense, but you can still get it done with CSS trickery. In this

You can make a garden variety anchor link () open up a new email. Let's take a little journey into this feature. It's pretty easy to use, but as with anything

Little confession here: when I first saw Netlify CMS at a glance, I thought: cool, maybe I'll try that someday when I'm exploring CMSs for a new project. Then

In December 2018, Microsoft announced that Edge would adopt Chromium, the open source project that powers Google Chrome. Many within the industry reacted with

I like Gutenberg, the new WordPress editor. I'm not oblivious to all the conversation around accessibility, UX, and readiness, but I know how hard it is to

Using for a menu may be an interesting idea, but perhaps not something to actually ship in production. See "More Details on "


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

SublimeText3 English version
Recommended: Win version, supports code prompts!

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

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

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

Atom editor mac version download
The most popular open source editor