层叠样式及其浮动例子

最新推荐文章于 2022-07-28 14:17:52 发布

放开那个鸡腿

最新推荐文章于 2022-07-28 14:17:52 发布

阅读量326

点赞数

本文链接：https://blog.csdn.net/myzhou2017/article/details/79601930

版权

在我们进行网页制作的过程中，会经常用到浮动float以及层叠的概念z-index，利用浮动可以很好的进行页面布局

首先我们先了解一下 position: relative 相对定位和absolute绝对定位

relative如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

absolute是相对于定位父集的绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

比如

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
       .parant{ width: 300px;height: 300px;margin: 30px auto; border: 2px solid red;padding: 10px; position: relative;}
       .parant a{ width: 100px; height: 100px; background: red;color: #fff; text-align: center;text-decoration: none; position: absolute; }
       .link1{ left: 10px;top: 10px; }
       .link2{ right: 10px;top: 10px; }
       .link3{ right: 110px;top: 110px; }
       .link4{ left: 10px;bottom: 10px; }
       .link5{ right: 10px;bottom: 10px; }
	</style>
</head>
<body>
   <div class="parant">
   	<a href="" class="link1">链接1</a>
   	<a href="" class="link2">链接2</a>
   	<a href="" class="link3">链接3</a>
   	<a href="" class="link4">链接4</a>
   	<a href="" class="link5">链接5</a>
   </div>
</body>
</html>

掌握定位可以轻松地对页面进行布局

层叠样式

放开那个鸡腿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
层叠样式及其浮动例子

在我们进行网页制作的过程中，会经常用到浮动float以及层叠的概念z-index，利用浮动可以很好的进行页面布局首先我们先了解一下 position: relative 相对定位和absolute绝对定位 relative如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。absolute是相对于定位父集的绝对定位的...
复制链接

扫一扫