The position attributes are: 1. relative, which is used to generate relatively positioned elements and position them relative to their normal position. 2. Absolute, used to generate absolutely positioned elements, positioned relative to the first parent element other than static positioning. 3. Fixed, used to generate fixedly positioned elements, positioned relative to the browser window. 4. static, the default value, no positioning is performed, and the element appears in the normal flow. 5. sticky, used for sticky positioning, which is based on the position of the user's scroll.
The operating environment of this tutorial: windows10 system, css3 version, DELL G3 computer. This method is suitable for all brands of computers.
The position attributes are:
1. position: relative; relative positioning
Generates relatively positioned elements, relative to its normal position. Therefore, "left:20" adds 20 pixels to the element's LEFT position.
1> Does not affect the characteristics of the element itself (whether block elements or inline elements will retain their original characteristics)
2> Will not cause the element to break out of the document flow (the original position of the element will be retained , even if the position is changed, the new position will not be occupied)
3> If there is no positioning offset, it will have no effect on the element (offset relative to its original position)
4> Upgrade the level ( The value of the z-index style can be used to change the hierarchical relationship of a positioned element, thereby changing the covering relationship of the element. The larger the value, the higher it is. Z-index can only be effective on elements whose position attribute value is relative, absolute, or fixed.) (Both are positioning elements, and the latter one will overwrite the previous positioning)
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2 id="这是位于正常位置的标题">这是位于正常位置的标题</h2>
<h2 id="这个标题相对于其正常位置向左移动">这个标题相对于其正常位置向左移动</h2>
<h2 id="这个标题相对于其正常位置向右移动">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
</html>
2. position: absolute; absolute positioning
Generate an absolutely positioned element, positioned relative to the first parent element other than static positioning. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.
1> Make the element completely out of the document flow (no longer occupy space in the document flow)
2> Make the inline element support width and height when setting the width and height (change the inline element properties)
3> Make the block element expand its width by the content when the width is not set (change the properties of the block element)
4> Relative to the nearest positioned parent element Offset (if its parent element is not positioned, search it layer by layer until document - page document object)
5> Relative positioning is generally used in conjunction with absolute positioning (set the relative positioning of the parent element so that it is relative to Parent element offset)
6> Promote level (same as relative positioning)
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 id="这是带有绝对定位的标题">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>
</html>
3. position: fixed; fixed positioning
fixed generates fixed-positioned elements, positioned relative to the browser window. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.
<html>
<head>
<style type="text/css">
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="one">一些文本。</p>
<p class="two">更多的文本。</p>
</body>
</html>
4. position: static: default value
Default layout. The element appears in normal flow (ignoring top, bottom, left, right or z-index declarations).
5. Position: sticky Sticky positioning
Sticky positioning, this positioning is based on the position of the user's scroll.
It behaves like position:relative; and when the page scrolls beyond the target area, it behaves like position:fixed; and it will be fixed at the target position.
Note: Internet Explorer, Edge 15 and earlier IE versions do not support sticky positioning. Safari requires -webkit- prefix.
Related tutorial recommendations: CSS video tutorial
The above is the detailed content of What are the position attributes?. For more information, please follow other related articles on the PHP Chinese website!
css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM在css中，可用list-style-type属性来去掉ul的圆点标记，语法为“ul{list-style-type:none}”；list-style-type属性可设置列表项标记的类型，当值为“none”可不定义标记，也可去除已有标记。
css与xml的区别是什么Apr 24, 2022 am 11:21 AM区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。
css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM在css中，可以利用cursor属性实现鼠标隐藏效果，该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状，当属性值设置为none时，就可以实现鼠标隐藏效果，语法为“元素{cursor:none}”。
css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM在css中，可以利用“font-style”属性设置i元素不是斜体样式，该属性用于指定文本的字体样式，当属性值设置为“normal”时，会显示元素的标准字体样式，语法为“i元素{font-style:normal}”。
rtl在css是什么意思Apr 24, 2022 am 11:07 AM在css中，rtl是“right-to-left”的缩写，是从右往左的意思，指的是内联内容从右往左依次排布，是direction属性的一个属性值；该属性规定了文本的方向和书写方向，语法为“元素{direction:rtl}”。
css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM转换方法：1、给英文元素添加“text-transform: uppercase;”样式，可将所有的英文字母都变成大写；2、给英文元素添加“text-transform:capitalize;”样式，可将英文文本中每个单词的首字母变为大写。
怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM在css3中，可以用“transform-origin”属性设置rotate的旋转中心点，该属性可更改转换元素的位置，第一个参数设置x轴的旋转位置，第二个参数设置y轴旋转位置，语法为“transform-origin:x轴位置 y轴位置”。
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
Dreamweaver CS6
Visual web development tools
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
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),
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
Dreamweaver Mac version
Visual web development tools
