CSS 定位

使用position属性给网页进行定位，position样式的取值有如下几种：

  • static：默认值，没有定位或者叫静态定位。
  • relative：相对定位
  • absolute：绝对定位
  • fixed：固定定位

一、static定位

<style type="text/css">
    #big{ width: 600px; height: 400px; border: solid 1px red;}
    #div1,#div2{ width: 500px; height: 100px; border: solid 1px red; margin: 10px;}
</style>

<div id="big">
    <div id="div1">111</div>
    <div id="div2">222</div>
</div>

我们可以看到div1和div2基本标准文档流自动定位，即div1在上，div2紧接着在下。两个div都被包含在big容器里面。

二、relative定位

relative定位：相对自身原来位置进行偏移；偏移位置通过top,bottom,left,right来进行设置。

<style type="text/css">
    #big{ width: 600px; height: 400px; border: solid 1px red;}
    #div1,#div2{ width: 500px; height: 100px; border: solid 1px red; margin: 10px;}
    #div2{ position: relative; top: 100px; left: 100px;}
</style>

<div id="big">
    <div id="div1">111</div>
    <div id="div2">222</div>
</div>

我们可以看到DIV2在相对自身原来位置的基础上，向下偏移100PX，向右偏移100PX；相对定位仍然在标准文档流中。

三、absolute定位

绝对定位：相对于最近的一个“已经定位”的“祖先元素” 为基准进行偏移，这句话不好理解，我们看如下代码：

<head>
	<meta charset="UTF-8">
	<title>Position定位-absolute</title>
	<style type="text/css">
		#big{ width: 600px; height: 400px; border: solid 1px red; margin: 200px;}
		#div1,#div2{ width: 500px; height: 100px; border: solid 1px red; margin: 10px;}
		#div2{ position: absolute; left: 100px; top: 100px;}
	</style>
</head>
<body>
	<div id="big">
		<div id="div1">111</div>
		<div id="div2">222</div>
	</div>
</body>

此时，DIV2并没有相对于big进行偏移，虽然big是div2的最近祖先元素，但是big没有定位，此时会继续寻找上一级已经定位的祖先元素，一直找下去，找到了则相对于这个祖先元素进行偏移，如果一直找不到，则相对于body元素进行偏移，所以在上述代码中DIV2相对于body元素进行了向下偏移100PX，向右偏移100PX。

在看如下代码，给big添加relative定位：

<head>
	<meta charset="UTF-8">
	<title>Position定位-absolute</title>
	<style type="text/css">
		#big{ width: 600px; height: 400px; border: solid 1px red; margin: 200px; position: relative;}
		#div1,#div2{ width: 500px; height: 100px; border: solid 1px red; margin: 10px;}
		#div2{ position: absolute; left: 100px; top: 100px;}
	</style>
</head>
<body>
	<div id="big">
		<div id="div1">111</div>
		<div id="div2">222</div>
	</div>
</body>

此时由于DIV2的父级元素big有了定位，所以DIV2相对于big进行了向下偏移100PX，向右偏移100PX，为了实现子元素相对于父元素绝对定位，通常我们将父元素设置position:relative，而将子元素设置position:absolute。

绝对定位已经完全脱离了标准文档流。

四、fixed定位

固定定位：类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口。所以只要固定定位，不管浏览器的滚动条如何滚动，该定位元素不会随着滚动条的滚动一起移动，而是一直静止在那里。

<style type="text/css">
    #big{ width: 600px; height: 400px; border: solid 1px red;}
    #div1,#div2{ width: 500px; height: 100px; border: solid 1px red; margin: 10px;}
    #div2{ width: 200px; height: 300px; background-color: green;
    position: fixed; top: 100px; right: 10px;}
</style>

<div id="big">
    <div id="div1">111</div>
    <div id="div2">222</div>
</div>

我们可以看到DIV2相对于浏览器上方向下偏移100PX，相对于浏览器右边向左偏移10PX；如果网页内容很长，不管浏览器滚动条如何滚动，DIV2的位置不会受到滚动条滚动的影响。

固定定位已经完全脱离了标准文档流。

五、z-index

z-index:调整元素定位时重叠层的上下位置，默认值为0

<style type="text/css">
#div1{ position: absolute; top: 150px; left: 150px; z-index: 2; opacity: 0.5;}
#div2{position: absolute; top: 300px; left: 300px; z-index: 1;}
</style>

<div id="div1">
	<img src="img/zjl.jpg" width="300" height="300" />
</div>
<div id="div2">
	<img src="img/fbb.jpg" width="300" height="300">
</div>

我们可以看到DIV1覆盖在DIV2的上面。

posted @ 2022-03-30 16:15  码农阿亮  阅读(34)  评论(0)  编辑  收藏  举报