目录
盒模型和定位类型
要清楚的理解css中的position属性,首先我们需要详细的了解 css盒模型
文档中的每个元素都被描绘为矩形的盒子,进而确定其大小(width,height),位置(left,top,right,bottom),属性(color,background,border…)等。这种盒模型描述了元素内容占用空间。盒子有四个边界:外边距边界margin edge, 边框边界border edge, 内边距边界padding edge 与 内容边界content edge。如下图(图片来自w3school):
定位模式规定了一个盒子在总的布局上应该处于什么位置,以及对周围的盒子有什么影响。而定位模式包括了常规的 文档流 , 浮动 ,和 position定位 。 这篇文章主要学习position定位
css的position属性可以取5种值:
- position: static
- position: relative
- position: absolute
- position: fixed
- position: inherit
静态定位(static)
static 是position默认的属性值,任何应用 position:static 的元素都会处于常规文档流中,它所处的位置以及如何影响周边的元素都是由盒模型所决定的
一个 static 定位的元素会忽略所有top, right, bottom, left以及z-index属性所声明的值。如果想使用这些属性值,需要为它的position属性应用absolute, relative, fixed之一才有效。
绝对定位(absolute)
绝对定位的元素会完全从常规的文档流中脱离,对于包围它的元素来说,它们会将绝对定位元素视为不存在,就好像display属性设为none一样。可以通过top, right, left, bottom四个属性来设置绝对定位的元素,它们的默认值为auto。
绝对定位的关键点在于它的起点在哪里,比如设置 top: 20px ,那么这20px是从哪里开始计算的。
一个绝对定位的元素的起点位置是相对于它的第一个position值不为static的父元素而言的,比如:
- 当你在一个元素的样式设置为 position:absolute
- 如果该元素的父元素的position值不为static(而是relative,absolute,fixed,inherit), 那么绝对定位元素的起点为父元素的左上角位置,
- 当该元素的父元素为默认值(static),那么就检查父元素的父元素是否有非static定位,如果该元素应用了(relative,absolute,fixed,inherit)定位,则它的左上角便会成为绝对元素的起始位置。
- 如果还没有,就向上遍历DOM,直到找到一个非static定位元素或寻找失败到达最外层浏览器窗口,此时绝对定位元素会相对于文档窗口来定位。
看代码更容易明白:
See the Pen css-position-absolute by guihailiuli ( @guihailiuli ) on CodePen .
相对定位(relative)
如果将一个元素进行相对定位,它将根据top, left, bottom, left四个属性来决定自己的位置的,这些属性的设置让元素从默认位置移动。例如,top设置一个值“20px”在一个相对定位的元素上,这个元素会在原来位置向下移动“20px”。反之,“top”设置一个“-20px”,这个元素会在原来的位置向上移动“20px”。如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动。由于他们移向方向和距离不一样,可能使元素重叠在一起,看下面的效果:
See the Pen css-position-relative by guihailiuli ( @guihailiuli ) on CodePen .
在使用相对定位时,它在页面中仍然是正常的,静态的。在这种情况下,相对定位元素的默认位置还是被元素自身占用,其他元素不会占用相对定位元素当初的位置,可以理解为相对定位元素的位移是相对于元素自身的边缘进行位移。
事实上,一个相对定位元素同时设置了“top”和“bottom”位移属性值,实际上“top”优先级高于“bottom”。然而,一个相对定位元素同时设置了“left”和“right”位移属性,他们的优先级取决于页面使用的是哪种语言,例如,如果你的页面是英文页面,那么“left”位移属性优先级高,如果你的页面是阿拉伯语,那么“right”的位移属性优先级高。
固定定位(fixed)
固定定位和绝对定位类似,但是它定位是 相对于浏览器窗口 ,通过属性的 top, right, bottom, 和 left 属性来决定其位置,并且不会随滚动条进行滚动。也就是说,不管用户停留在页面那个地方,固定定位的元素将始终停留在页面的一个地方。“position”属性值中,仅有“fixed”属性值不能在IE6浏览器下运行.
See the Pen css-position-fixed by guihailiuli ( @guihailiuli ) on CodePen .
固定定位最常见的一种用途就是在页面中创建一个固定头部、或者脚部、或者固定页面的一个侧面。
See the Pen css-position-fixed-footer by guihailiuli ( @guihailiuli ) on CodePen .

HTML is not only the skeleton of web pages, but is more widely used in many fields: 1. In web page development, HTML defines the page structure and combines CSS and JavaScript to achieve rich interfaces. 2. In mobile application development, HTML5 supports offline storage and geolocation functions. 3. In emails and newsletters, HTML improves the format and multimedia effects of emails. 4. In game development, HTML5's Canvas API is used to create 2D and 3D games.

TheroottaginanHTMLdocumentis.Itservesasthetop-levelelementthatencapsulatesallothercontent,ensuringproperdocumentstructureandbrowserparsing.

The article explains that HTML tags are syntax markers used to define elements, while elements are complete units including tags and content. They work together to structure webpages.Character count: 159

The article discusses the roles of <head> and <body> tags in HTML, their impact on user experience, and SEO implications. Proper structuring enhances website functionality and search engine optimization.

The article discusses the differences between HTML tags , , , and , focusing on their semantic vs. presentational uses and their impact on SEO and accessibility.

Article discusses specifying character encoding in HTML, focusing on UTF-8. Main issue: ensuring correct display of text, preventing garbled characters, and enhancing SEO and accessibility.

The article discusses various HTML formatting tags used for structuring and styling web content, emphasizing their effects on text appearance and the importance of semantic tags for accessibility and SEO.

The article discusses the differences between HTML's 'id' and 'class' attributes, focusing on their uniqueness, purpose, CSS syntax, and specificity. It explains how their use impacts webpage styling and functionality, and provides best practices for


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

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

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.

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

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
