DIV定位实例

最新推荐文章于 2021-07-20 16:51:00 发布

走_心

最新推荐文章于 2021-07-20 16:51:00 发布

阅读量667

点赞数

CC 4.0 BY-SA版权

分类专栏：【前端学习】文章标签： div定位相对定位绝对定位

本文链接：https://blog.youkuaiyun.com/tianchenglin/article/details/41727579

【前端学习】专栏收录该内容

9 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV的定位</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<div id="first">第一个层</div>
<div id="second">第二个层</div>
<div id="third">第三个层</div>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<div class="first">第四层</div>
<div class="second">第五层</div>
</body>
</html>


//style.css
h2.pos_abs{    /*绝对定位 需设置左和上位置*/
position:absolute;
left:100px;
top:150px;
background:#fba
}
#first{  /*通过z-index来确定显示那个层*/
position:absolute;
left:110px;
top:10px;
width:400px;
height:100px;
background:#676767;
z-index:1           
}
#second{
positon:absolute;
left:110px;
top:10px;
width;300px;
height:100px;
background:#f00;
z-index:2
}
#third{  /*默认定位*/
width:100px;    
height:150px;
background:blue;
}

h2.pos_left{   /*相对定位*/
position:relative;
left:20px;
}
h2.pos_right{  /*相对定位*/
position:relative;
right:20px;
}
.first{
position:relative;
left:50px;
top:50px;
width:100px;
height:80px;
background:#f00;
}
.second{
position:relative;
left:80px;
top:80px;
width:100px;
height:80px;
background:blue;
}

运行结果：