html中相对定位与绝对定位的笔记

最新推荐文章于 2024-02-14 11:51:22 发布

原创最新推荐文章于 2024-02-14 11:51:22 发布 · 736 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html中的相对和绝对 #relative与 #absoute #相对定位与绝对定位的用法

ui 专栏收录该内容

19 篇文章

订阅专栏

本文详细解析了HTML中body与html的区别及CSS中相对定位(relative)与绝对定位(absolute)的使用方法。通过实例展示了margin与top/left/right/bottom属性在布局中的不同作用。

html是整个文档空间，body是html中的文档空间， body与html相差9cm左右

body是靠里面的文档空间撑大的

postion中的相对定位：relative

postion中的绝对定位：absolute

相对定位：

当没有参照物的时候，相对定位是相对与body定位的（从上，下，左，右开始寻找文档文件是否被占用了（除了绝对定位以外，若用绝对定位了），若有文档空间被占用，则开始从这定位）

绝对定位：

当没有参照物额时候，绝对定位是相对与window定位的（从父类的定位position开始寻找参照物，一级一级向上找，若没有，则直到最后的window）

使用margin的时候，是占用文档空间的

使用top，left，right，button的时候，是不占用文档空间的，看情况使用

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	*{margin:0;padding:0;}
	.content{		
		width:500px;
		height:600px;
		margin:100px auto;		
		box-shadow:1px 1px 6px #ff3300;
	}
	.content1{		
		width:100px;
		height:100px;
		margin-top:50px;
		border:1px solid blue;
	}
	.content11{
		position:relative;
		width:110px;
		height:110px;
		top:50px;
		border:1px solid green;
	}
	.content2{
		
		width:100px;
		height:100px;
		top:50px;
		border:1px solid red;
	}
  </style>
 </head>
 <body>
	<div class="content">
		<div class="content1"></div>
		<div class="content11"></div>
		<div class="content2"></div>
	</div>
 </body>
</html>

上面的代码运行如下图：

从上图可以看出当使用相对定位的时候，.content2的父级是.content，则位置紧挨着.content1和.content11的总高度

当.content11改为如下图文档的时候，如下图：

.content11{
		
	width:110px;
	height:110px;
	margin-top:50px;
   border:1px solid green;
}

上图当.content11里面的文档改为margin-top的时候，则占用了文档空间，则如上图所示定位

则定位只是用来定其位置，而margin-top/left/botton/right是占用控件文档

我们一般是在相对里面套用绝对来进行项目的开发

      divAddress{
                    position: relative;
                    margin-top: 48px;//这就是刚才提的当使用margin的时候才能进行下面的相对
                    width: 370px;
                    height: 66px;
                    border-bottom: 1px #c1c1c1 solid;
                }
                #img1{
                    position: absolute;
                    float: left;margin-top:2px;
                    width: 24px; height: 24px;
                }
                .address{
                    position: absolute;
                    margin-left: 34px;
                    font-size: 20px;
                    color: #c1c1c1;
                }

               #peoplePost1{
                    position: relative;
                    margin-top: 12px;
                    width: 370px;
                    height: 40px;
                    border-bottom: 1px #c1c1c1 solid;
                }
                #people1{
                    position: absolute;
                    float: left;margin-top:2px;
                    width: 24px; height: 24px;
                }
                .people2{
                    position: absolute;
                    margin-left: 34px;
                    font-size: 20px;
                    color: #c1c1c1;
                }
                #post1{
                    position: absolute;
                    float: left;margin-top:2px;margin-left:192px;
                    width: 24px; height: 24px;
                }
                .post2{
                    position: absolute;
                    margin-left: 222px;
                    font-size: 20px;
                    color: #c1c1c1;
                }

               <div id="divAddress">
                    <img id="img1" alt="address" src="<%=request.getContextPath()%>/images/address.png">
                    <div class="address">地址 ： <span style="font-weight: 600;color: black;">输入上海市卢湾区卢湾榜路758弄10号1011室</span></div>
                </div>

               <div id="peoplePost1">
                    <img id="people1" alt="people" src="<%=request.getContextPath()%>/images/people.png">
                    <div class="people2">联系人 : <span style="font-weight: 600;color: black;">张三</span></div>
                    <img id="post1" alt="post" src="<%=request.getContextPath()%>/images/post.png">
                    <div class="post2">职位 : <span style="font-weight: 600;color: black;">业务经理</span></div>
                </div>

上面也就是相对和绝对结合的html代码中的一段