您的位置：首页 > Web前端 > CSS

css盒子模型之定位

2017-04-28 15:38 357 查看

1、Static 定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到top, bottom, left, right影响。

2、Fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

Fixed定位使元素的位置与文档流无关，因此不占据空间。

Fixed定位的元素和其他元素重叠。

3、Relative 定位

相对定位元素的定位是相对其正常位置。

可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。

相对定位元素经常被用来作为绝对定位元素的容器块。

4、Absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:

Absolutely定位使元素的位置与文档流无关，因此不占据空间。

Absolutely定位的元素和其他元素重叠。

重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意：如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

相对与绝对定位的区别

绝对定位（absolute）：

1、将被赋予此定位方法的对象从文档流中拖出，使用left，right，top， bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据 body 对象左上角作为参考进行定位。

2、绝对定位对象可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，大的在最上面，可以有负值。

相对于最近的非标准流定位，原来的位置消失，被后边的位置所顶替

相对定位（relative）：

相对于原来的位置，但是原来的位置仍然保留。

对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。

同样可以用z-index分层设计。

[教程] 彻底弄懂CSS盒子模式四(绝对定位和相对定位)

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*多个标签同时设置，使用逗号分隔*/
body, div, ul, li, img, a {
margin: 0;
padding: 0;
}

/*给定图片尺寸：否则会超出父容器，堆叠在一起*/
img {
width: 100%;
height: 100%
}

/*让a标签绝对于li标签，li要设置relative*/
li {
list-style: none;
position: relative;
float: left;
padding: 1%;
width: 18%;
}

/*让删除红叉处于li的右上角，且需给定大小*/
a {
background: url(images/close.png);
width: 16px;
height: 16px;
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="div1">
<ul>
<li><img src="images/head.png" alt=""> <a href="###"></a></li>
<li><img src="images/head.png" alt=""> <a href="###"></a></li>
<li><img src="images/head.png" alt=""> <a href="###"></a></li>
<li><img src="images/head.png" alt=""> <a href="###"></a></li>
<li><img src="images/head.png" alt=""> <a href="###"></a></li>
</ul>
</div>

</body>
</html>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航