谈谈CSS中的position属性

最新推荐文章于 2022-03-18 19:36:10 发布

BigLazyET

最新推荐文章于 2022-03-18 19:36:10 发布

阅读量1.8k

点赞数 4

文章标签： css position absolute fixed relative

本文链接：https://blog.csdn.net/u010792238/article/details/22790789

版权

CSS/CSS3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一直以来，CSS中最让我纠结的莫过于position属性和index属性。在写网页的时候用这两个属性都达不到想要的效果，或者达到了想要的效果但是影响到其他标签的位置，又或是达到了效果不影响其他标签，但是换了其他浏览器显示又不正确。

这些个问题都很头疼，不仅要求自己对position和index的用法和含义完全领会，而且要解决各个浏览器不兼容的问题。这一篇就先讲一下position的用法。

position默认值是static(也就是没有定位，出现在正常流中罢了，该在哪里就在那里)

注意这个属性一般要与top,bottom,left,right属性合起来用

首先明确下，任何元素都可定位。绝对和固定定位，元素会生成一个块级框；相对定位元素相对于在它正常流中的默认位置偏移，我常常搞不清楚，这里所说的默认位置是什么位置。其实大家可以先把position的属性去掉，运行看看网页上对应的元素处于什么位置，这里的位置应该就是默认位置。再把position属性加上去看看猜想正不正确。

下面是我自己写的例子，虽然不是很完善，但应该很能说明问题。

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>position讲解</title>
<style type="text/css">
.staticType {
	position: static;
	top: 30px;
	left: 30px;
}
.relativeType {
	position: relative;
	top: 30px;
	left: 30px;
}
.absoluteType {
	position: absolute;
	top: 30px;
	left: 30px;
}
.fixedType {
	position: fixed;
	top: 30px;
	left: 30px;
}
</style>
</head>
<body>
<div style="width:1200px; margin:0 auto; border:1px solid #00F">
  <div style="width:960px; margin:0 auto; position:relative; border:1px solid #FF0">
    <div>
      <p>这个是没有显式使用position属性</p>
      <br />
      <br />
      <div style=" border:1px solid #F00"> 这是一个块 </div>
      <div style="border:1px solid #00F; color:#F00"> 这个是没有显式使用position属性的块 </div>
    </div>
    <div>
      <p>这个是用了position的static属性</p>
      <br />
      <br />
      <div style=" border:1px solid #F00"> 这是一个块 </div>
      <div style="border:1px solid #00F; color:#F00" class="staticType"> 这个是用了position的static属性块 </div>
    </div>
    <div>
      <p>这个是用了position的relative属性</p>
      <br />
      <br />
      <div style=" border:1px solid #F00"> 这是一个块 </div>
      <div style="border:1px solid #00F; color:#F00" class="relativeType"> 这个是用了position的relative属性的块 </div>
    </div>
    <div>
      <p>这个是用了position的absoulte属性</p>
      <br />
      <br />
      <div style=" border:1px solid #F00"> 这是一个块 </div>
      <div style="border:1px solid #00F; color:#F00" class="absoluteType"> 这个是用了position的absoulte属性的块 </div>
    </div>
    <div>
      <p>这个是用了position的fixed属性</p>
      <br />
      <br />
      <div style=" border:1px solid #F00"> 这是一个块 </div>
      <div style="border:1px solid #00F; color:#F00" class="fixedType"> 这个是用了position的fixed属性的块 </div>
    </div>
  </div>
</div>
</body>
</html>

这是效果图：