Html层模型中relative和absolute组合使用

最新推荐文章于 2022-07-14 18:35:42 发布

邹小敏3

最新推荐文章于 2022-07-14 18:35:42 发布

阅读量579

点赞数

分类专栏：原创 HTML

本文链接：https://blog.csdn.net/u014800380/article/details/51423815

版权

原创同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

HTML

6 篇文章 0 订阅

订阅专栏

Html层模型中relative和absolute组合使用的注意事项：

1、参照定位的元素必须是相对定位元素的前辈元素：

<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>

从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。

2、参照定位的元素必须加入position:relative;

#box1{
    width:200px;
    height:200px;
    position:relative;        
}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

例子：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相对参照元素进行定位</title>
<style type="text/css">
div{border:2px red solid;}
#box1{
    width:200px;
    height:200px;
    position:relative;      
}
#box2{
 	position:absolute;
	top:0px;
	left:30px;    
}
/*下面是任务部分*/
#box3{
    width:200px;
    height:200px;
    position:relative;       
}
#box4{
    position:absolute;
    bottom:0;
    left:0; 
}
</style>
</head>

<body>
<div id="box1">
	<div id="box2">相对参照元素进行定位</div>
</div>

<h1>下面是任务部分</h1>
<div id="box3">
    <img src="https://i-blog.csdnimg.cn/blog_migrate/a4b44c9c2974f6456033e4b4b54d3139.jpeg">
    <div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>
</div>
</body>
</html>

效果图：

相对参照元素进行定位