css 中position定位_html/css_WEB-ITnose-html教程-PHP中文网

这是位于正常位置的标题

这个标题相对于其正常位置向左移动

这个标题相对于其正常位置向右移动

回复讨论(解决方案)

首页

web前端

html教程

css 中position定位_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:40 AM

css html

请看第一个代码

<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>

登录后复制

效果图：

如果把上面的代码改为

<html><head><style type="text/css">h2.pos_left{position:fixed;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>

登录后复制

效果图就变成了

以上都是在chrome浏览器的调试图
高手解释为什么出现这种情况，谢谢了。

回复讨论(解决方案)

h2.pos_left{position:fixed;left:-20px}

登录后复制

这个是固定定位，属于绝对定位的一种，被固定定位的元素已经脱离了原来的文档流。固定定位是相对于视窗窗口定位的，所以不管浏览器如何滚动，他都在相同位置

fixed 的包含块是视窗，不属于文档的流。

XML/HTML code?12345h2.pos_left{position:fixed;left:-20px}
这个是固定定位，属于绝对定位的一种，被固定定位的元素已经脱离了原来的文档流。固定定位是相对于视窗窗口定位的，所以不管浏览器如何滚动，他都在相同位置
那为什么在正常位置下的两句话位置反过来了

fixed 的包含块是视窗，不属于文档的流。
在“这是位于正常位置的标题”下面两句话的位置倒过来了。

引用 2 楼 eazyc 的回复:fixed 的包含块是视窗，不属于文档的流。
在“这是位于正常位置的标题”下面两句话的位置倒过来了。

你把浏览器窗口调小，出现滚动条，就会体会到固定定位是什么意思了

引用 4 楼 liulinisgood 的回复:引用 2 楼 eazyc 的回复:fixed 的包含块是视窗，不属于文档的流。
在“这是位于正常位置的标题”下面两句话的位置倒过来了。

你把浏览器窗口调小，出现滚动条，就会体会到固定定位是什么意思了
嗯，试了一下，的确fixed是不会改变位置的，relative会随滚动条上下而动。
在浏览器最大化时候在两幅图中的两句话位置颠倒是不是因为relative需要和标准的相对位置固定，所以就在css 中fixed的段落之上了，理解是否有误（就是第二幅中的黑体三句话的顺序）

position: fixed;

登录后复制

这个是固定在可视区域，这个时候不占据文档流空间，就是“

”设置固定定位后会把空间让出来，这个时候，下个H2元素就会占据pos_left的文档空间，就出现了你看到的现象

楼主看下
http://www.w3school.com.cn/css/pr_class_position.asp

生成绝对定位的元素，相对于浏览器窗口进行定位。

登录后复制

另外建议楼主写css加上 nbsp;HTML>
ie低版本不支持fixed，需要另作处理

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7363

Java教程

1628

CakePHP 教程

1353

Laravel 教程

1265

PHP教程

1214

显示更多

Related knowledge

公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？ Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存，这玩意儿，说简单也简单，说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章，结果用户打开还是老版本，这滋味，谁受得了？这篇文章，咱就来扒一扒这背后的弯弯绕绕，以及如何优雅地解决这个问题。读完之后，你就能轻松应对各种缓存难题，让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存，说白了就是浏览器或者服务器为了提高访问速度，把一些静态资源（比如图片、CSS、JS）或者页面内容存储起来。下次访问时，直接从缓存里取，不用再重新下载，速度自然快。但这玩意儿，也是个双刃剑。新版本上线，