css position 属性定位学习

最新推荐文章于 2021-03-15 21:26:10 发布

肝胆飨赵

最新推荐文章于 2021-03-15 21:26:10 发布

阅读量1.1k

点赞数

分类专栏： CSS笔记文章标签： CSS position属性 relative absolute fixed

本文链接：https://blog.csdn.net/yufei211314/article/details/9072791

版权

CSS笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

以下是基于W3cschool的内容（http://www.w3school.com.cn/），部分转自网络。
可能有点乱。

CSS position 属性

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

有四种属性：static、relative、absolute、fixed。

1.relative 元素框偏移某个距离。对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

CSS 相对定位实例

案例：定位：相对定位

2.absolute:将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。

元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。

案例：定位：绝对定位

效果显示：

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

CSS 绝对定位实例

3.fixed:元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身(不是很懂啊)。

先看个例子吧：

案例：定位：固定定位本例演示如何相对于浏览器窗口来对元素进行定位。为了让效果更明显，我将 style 代码做了调整如下：

结果如下图：

那么absolute和fixed有什么区别呢？

同样都是固定位置，但是absolute是与页面相对固定，而fixed是与浏览器窗口相对固定。

如下代码可以拿去测试一下，（可直接放在w3school的案例里面测试）：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>absolute和fixed的区别</title>
<style type="text/css">
 body{color:#fff;}
 #html{position:relative;width:778px; height:1000px; border:1px solid #0000FF;}
 #fixed,#absolute{width:200px; height:200px; background:#FF0000;}
 #fixed{position:fixed; top:50px; left:50px;}  /*在这里和下面的代码中我尝试加入了 right 与 bottom，但是效果没有变化，可能是top与left的 级别高吧。*/
 #absolute{position:absolute; top:50px; left:450px;}
</style>
</head>
<body>
 <div id="html">
  <div id="fixed">我在屏幕的位置不会改变</div>
  <div id="absolute">我会随屏幕滚动</div>
 </div>
</body>
</html>

4.至于最后一个，static，它是posotion的默认参数，无特殊定位，对象遵循html定位规则

肝胆飨赵

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css position 属性定位学习

以下是基于W3cschool的内容（http://www.w3school.com.cn/），部分转自网络。可能有点乱。CSS position 属性这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。有四种属性：static、relative、a
复制链接

扫一扫