search
HomeWeb Front-endCSS TutorialLearn more about the position property in css

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

2. css online manual

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!

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
A Little Reminder That Pseudo Elements are Children, Kinda.A Little Reminder That Pseudo Elements are Children, Kinda.Apr 19, 2025 am 11:39 AM

Here's a container with some child elements:

Menus with 'Dynamic Hit Areas'Menus with 'Dynamic Hit Areas'Apr 19, 2025 am 11:37 AM

Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should

Improving Video Accessibility with WebVTTImproving Video Accessibility with WebVTTApr 19, 2025 am 11:27 AM

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee

Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteWeekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteApr 19, 2025 am 11:25 AM

In this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.

Making width and flexible items play nice togetherMaking width and flexible items play nice togetherApr 19, 2025 am 11:23 AM

The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.

Position Sticky and Table HeadersPosition Sticky and Table HeadersApr 19, 2025 am 11:21 AM

You can't position: sticky; a

Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryWeekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryApr 19, 2025 am 11:18 AM

In this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties

IndieWeb and WebmentionsIndieWeb and WebmentionsApr 19, 2025 am 11:16 AM

The IndieWeb is a thing! They've got a conference coming up and everything. The New Yorker is even writing about it:

See all articles

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

Video Face Swap

Video Face Swap

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

Hot Tools

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)