Research on the value of position attribute in CSS (summary)
|
The CSS position attribute specifies the element's positioning type, and then uses top, bottom, left, and right to position it specifically. The position attribute must be used before specific positioning, otherwise all specific positioning attributes will not take effect. There are five possible values for position: static, relative, absolute, fixed, or sticky. Below, the blogger will explain the comparison of codes and running results one by one First, the position attribute is not set. You can see that the top attribute of the two elements is not effective, while the color attribute is effective. The current position is the position in the default document flow. This is used as a prototype to compare the changes in element position when the position is changed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./j.css">
</head>
<body>
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
</div>
</body>
</html>
.box {
display: inline-block;
background: red;
color: white;
}
#two {
top: 260px;
bottom: 126px;
left: 20px;
background: blue;
}
position：static Add position: static; to the #two class as follows (only the position value is modified in each subsequent place)
#two {
position:static;
top: 260px;
bottom: 126px;
left: 20px;
background: blue;
}
The default value for an HTML element is that it has no positioning and appears in the normal flow. Statically positioned elements are not affected by top, bottom, left, or right. Since this value will invalidate the positioning attribute, what is the meaning of its existence? During the process of modifying the web page style, you can temporarily block the position information of certain elements, or retain the position information of certain parts during modification to facilitate recovery. position：relative Relative positioning is positioning relative to the original normal document flow, but the original page layout is not changed during positioning. It is equivalent to just moving the positioned element, and the moved comparison standard position is the position in the normal document flow, and the original position will be left blank.
position: absolute With absolute positioning, the element is removed from the normal document flow and does not create space for elements in the page layout. It is positioned relative to the most recently positioned parent element. In this example, the positioning is based on the body element.
position: fixed Fixed positioning is similar to absolute positioning in that it will be deleted from the normal document flow and will not create space for elements in the page layout. The difference is that it is fixed to the viewport and is positioned based on the viewport. I believe everyone has had this experience when browsing many web pages. There will be advertisements on the top or bottom of the web page that will not move with the scrolling of the web page. They are fixed on the web page, and if the z-index is not set to modify the stacking order, they will cover the content of the web page.
position: sticky The element does not leave the document flow and still retains its original position in the document flow. When the element is scrolled beyond the specified offset value in the container, the element is fixed at the specified position in the container. That is, if you set top: 20px, then when the sticky element reaches a position 50px from the top of the relatively positioned element, it is fixed and no longer moves upward. The fixed relative offset of an element is relative to the parent element with the scroll box closest to it. If the parent element cannot be scrolled, the offset of the element is calculated relative to the viewport.
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: Docker builds kubectl image implementation steps
>>: Beginners learn some HTML tags (3)
Recommend
Summary of MySQL ALTER command knowledge points
When we need to change the table name or modify t...
A brief analysis of the differences between undo, redo and binlog in MySQL
Table of contents Preface 【undo log】 【redo log】 【...
Detailed explanation of HTML onfocus gain focus and onblur lose focus events
HTML onfocus Event Attributes Definition and Usag...
How to write memory-efficient applications with Node.js
Table of contents Preface Problem: Large file cop...
Detailed installation and configuration of hadoop2.7.2 under ubuntu15.10
There are many Hadoop installation tutorials on L...
Webpack builds scaffolding to package TypeScript code
Create a folder Directory structure: dabaots Init...
Detailed explanation of the role of explain in MySQL
1. MYSQL index Index: A data structure that helps...
Summary of discussion on nginx cookie validity period
Every visit will generate Cookie in the browser, ...
Native JS to achieve directory scrolling effects
Here is a text scrolling effect implemented with ...
Detailed explanation of JavaScript function introduction
Table of contents Function Introduction function ...
MySQL permission control details analysis
Table of contents 1. Global level 2. Database lev...
Comprehensive summary of MYSQL tables
Table of contents 1. Create a table 1.1. Basic sy...
Getting Started Guide to MySQL Sharding
Preface Relational databases are more likely to b...
Detailed steps to install docker in 5 minutes
Installing Docker on CentOS requires the operatin...
JS implements a simple brick-breaking pinball game
This article shares the specific code of JS to im...