html5 There are 5 types of positioning: 1. Absolute positioning (absolute); 2. Relative positioning (relative); 3. Fixed positioning (fixed); 4. Sticky positioning (sticky); 5. Static positioning (static) ).
The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.
Several positioning methods in html5
position sets the position of the block-level element relative to its parent block and relative to itself where it should be Position
1. Absolute positioning(absolute)
Features:
If there is no parent element, the reference object is the entire Document
By default, the reference object is the positioned parent element
Adding an absolutely positioned element will break away from the entire layout flow and destroy it. Layout space
The absolutely positioned element is dragged out from the document flow and relative to its closest parent element with the most positioning settings using attributes such as left, right, top, bottom etc. For absolute positioning, if the element's parent does not set the positioning attribute, positioning will be based on the upper left corner of the body element as a reference. Absolutely positioned elements can be stacked, and the stacking order can be controlled through the z-index attribute. The z-index value is a unitless integer, with the larger one on top, and can have negative values.
Absolute positioning positioning method: If its parent element sets a position other than static, such as position:relative or position:absolute and position:fixed, then it will be relative to its parent element. Positioning and position are specified by the left, top, right, and bottom attributes. If its parent element does not have positioning set, then it depends on whether the parent element of its parent element has positioning set. If it still does not, continue to the higher-level ancestor element. By analogy, in short, its positioning is relative to the first ancestor element that has a positioning other than static positioning. If all ancestor elements do not have one of the above three positionings, then it will be relative to the document. body to position (not relative to the browser window, positioning relative to the window is fixed).
<head>
<style type="text/css">
.box {
background: red;
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.two {
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box" >One</div>
<div class="box two" >Two</div>
<div class="box" >Three</div>
<div class="box">Four</div>
</body>Position the div with class="two" 50px from the top and left of
. It will change the layout of other elements and will not leave any blank space in the original position of this element.
#2. Relative positioning (relative is equivalent to the scene of an out-of-body experience)
Features:
The reference object is its own default position
Occupies space
Will not destroy the layout flow
Relatively positioned elements cannot be stacked and can be offset in the normal document flow based on attributes such as left, right, top, and bottom. You can also use z-index hierarchical design.
<head>
<style type="text/css">
.box {
background: red;
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.two {
position: relative;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box" >One</div>
<div class="box two" >Two</div>
<div class="box" >Three</div>
<div class="box">Four</div>
</body>Position the div with class="two" 50px from the top and left of its original position. It will not change the layout of other elements, but will leave a blank space in the original position of this element.
3. Fixed positioning (fixed)
Features:
Reference object Fixed positioning for the browser window
Fixed positioning is similar to absolute positioning, but it is positioned relative to the browser window and does not scroll with the scroll bar.
One of the most common uses of fixed positioning is to create a fixed header, fixed foot or fixed sidebar on the page, without using margin, border, or padding.
How to center an element on the left, right, top and bottom of the browser window:
Method one:
position:fixed left:50%; top:50%; margin-left: -盒子宽度的一半 margin-top:-盒子高度的一半
Method two:
position:fixed; left:0; right:0 top:0 bottom:0 margin:auto
4. Sticky positioning (sticky has compatibility issues)
Features:
It is a combination of relative and fixed
When the page does not trigger the scroll bar, the execution effect is position: relative, otherwise the execution effect is position: fixed
-
The application is: page ceiling
<!DOCTYPE html>
<html>
<meta charset="utf8">
<head>
<style>
section:first-child {
height: 200px;
background-color: lightgray;
}
section:nth-child(2) {
height: 100px;
background-color: orange;
position: sticky;
position: -webkit-sticky;
top: 50px;
}
section:nth-child(3) {
height: 300px;
background-color: lightgray;
}
section:nth-child(4) {
height: 100px;
background-color: orange;
position: sticky;
position: -webkit-sticky;
top: 150px;
}
section:last-child {
height: 500px;
background-color: darkgray;
}
</style>
</head>
<body>
<section>SECTION-1</section>
<section>SECTION-2</section>
<section>SECTION-3</section>
<section>SECTION-4</section>
<section>SECTION-5</section>
</body>
</html>
5. Static positioning (static default)
When you do not specify for an element (such as div) The positioning method defaults to static, which means that the element is positioned in a suitable place according to the flow of the document. Therefore, under different resolutions, the use of flow positioning can be well adapted and achieve relatively good layout effects.
Generally speaking, we do not need to specify that the positioning method of the current element is static - because this is the default positioning method. Unless you want to override the positioning system inherited from the parent element.
The left and top attributes have no effect on static, which is positioned by margin.
Related recommendations: "html video tutorial"
The above is the detailed content of What are the types of html5 positioning?. For more information, please follow other related articles on the PHP Chinese website!
Frontend Development with React: Advantages and TechniquesApr 17, 2025 am 12:25 AMThe advantages of React are its flexibility and efficiency, which are reflected in: 1) Component-based design improves code reusability; 2) Virtual DOM technology optimizes performance, especially when handling large amounts of data updates; 3) The rich ecosystem provides a large number of third-party libraries and tools. By understanding how React works and uses examples, you can master its core concepts and best practices to build an efficient, maintainable user interface.
React vs. Other Frameworks: Comparing and Contrasting OptionsApr 17, 2025 am 12:23 AMReact is a JavaScript library for building user interfaces, suitable for large and complex applications. 1. The core of React is componentization and virtual DOM, which improves UI rendering performance. 2. Compared with Vue, React is more flexible but has a steep learning curve, which is suitable for large projects. 3. Compared with Angular, React is lighter, dependent on the community ecology, and suitable for projects that require flexibility.
Demystifying React in HTML: How It All WorksApr 17, 2025 am 12:21 AMReact operates in HTML via virtual DOM. 1) React uses JSX syntax to write HTML-like structures. 2) Virtual DOM management UI update, efficient rendering through Diffing algorithm. 3) Use ReactDOM.render() to render the component to the real DOM. 4) Optimization and best practices include using React.memo and component splitting to improve performance and maintainability.
React in Action: Examples of Real-World ApplicationsApr 17, 2025 am 12:20 AMReact is widely used in e-commerce, social media and data visualization. 1) E-commerce platforms use React to build shopping cart components, use useState to manage state, onClick to process events, and map function to render lists. 2) Social media applications interact with the API through useEffect to display dynamic content. 3) Data visualization uses react-chartjs-2 library to render charts, and component design is easy to embed applications.
Frontend Architecture with React: Best PracticesApr 17, 2025 am 12:10 AMBest practices for React front-end architecture include: 1. Component design and reuse: design a single responsibility, easy to understand and test components to achieve high reuse. 2. State management: Use useState, useReducer, ContextAPI or Redux/MobX to manage state to avoid excessive complexity. 3. Performance optimization: Optimize performance through React.memo, useCallback, useMemo and other methods to find the balance point. 4. Code organization and modularity: Organize code according to functional modules to improve manageability and maintainability. 5. Testing and Quality Assurance: Testing with Jest and ReactTestingLibrary to ensure the quality and reliability of the code
React Inside HTML: Integrating JavaScript for Dynamic Web PagesApr 16, 2025 am 12:06 AMTo integrate React into HTML, follow these steps: 1. Introduce React and ReactDOM in HTML files. 2. Define a React component. 3. Render the component into HTML elements using ReactDOM. Through these steps, static HTML pages can be transformed into dynamic, interactive experiences.
The Benefits of React: Performance, Reusability, and MoreApr 15, 2025 am 12:05 AMReact’s popularity includes its performance optimization, component reuse and a rich ecosystem. 1. Performance optimization achieves efficient updates through virtual DOM and diffing mechanisms. 2. Component Reuse Reduces duplicate code by reusable components. 3. Rich ecosystem and one-way data flow enhance the development experience.
React: Creating Dynamic and Interactive User InterfacesApr 14, 2025 am 12:08 AMReact is the tool of choice for building dynamic and interactive user interfaces. 1) Componentization and JSX make UI splitting and reusing simple. 2) State management is implemented through the useState hook to trigger UI updates. 3) The event processing mechanism responds to user interaction and improves user experience.
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
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SublimeText3 English version
Recommended: Win version, supports code prompts!
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.
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
