码迷,mamicode.com
首页 > Web开发 > 详细

CSS 之 Position定位

时间:2016-07-02 16:05:30      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:

1. static

技术分享
技术分享

2. relative

技术分享
 

技术分享3. fixed

技术分享

一个固定定位(position属性的值为fixed)元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。和 relative 一样, toprightbottomleft 属性都可用。

我相信你已经注意到页面右下角的固定定位元素。你现在可以仔细看看它,这里有它所使用的CSS:

技术分享

一个固定定位元素不会保留它原本在页面应有的空隙。

令人惊讶地是移动浏览器对 fixed 的支持很差。这里有相应的解决方案.

4. absolute

absolute 是最棘手的position值。 absolutefixed 的表现类似,除了它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位(position属性的值为absolute)的元素没有“positioned”祖先元素,那么它是相对于文档的 body 元素,并且它会随着页面滚动而移动。记住一个“positioned”元素是指p osition 值不是 static 的元素。

这里有一个简单的例子:

技术分享

 

这个元素是相对定位的。如果它是 position: static; ,那么它的绝对定位子元素会跳过它直接相对于body元素定位。

技术分享

CSS 之 Position定位

标签:

原文地址:http://www.cnblogs.com/alkq1989/p/5635396.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!