33-定位

最新推荐文章于 2022-04-25 18:48:27 发布

会编程的阿强

最新推荐文章于 2022-04-25 18:48:27 发布

阅读量646

点赞数

分类专栏： HTML/CSS

本文链接：https://blog.csdn.net/shuangrenyu1234/article/details/9526189

版权

HTML/CSS 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

一、定位的种类

1.static 静态定位（默认的定位方式）

2.relative 相对定位

3.absolute. 绝对定位

4.fixed 固定定位

相对定位：相对于原来的地方定位，图中的红点处，虽然离开了原来的地方，但是他的位置不能被别的地方占用

<html>
 <head>
  <title> New Document </title>
  <style>
.div1{
 width:70px;
 height:30px;
 background:silver;
float:left;
margin-left:5px;
}
#spe{
position:relative;
 left:40px;
 top:100px;
}
  </style>
 </head>

 <body>
  <div class="div1">内容1</div>
  <div class="div1" id="spe" >内容2</div>
  <div class="div1">内容3</div>
  <div class="div1">内容4</div>
    
 </body>
</html>

绝对定位：

<html>
 <head>
  <title> New Document </title>
  <style>
.div1{
 width:70px;
 height:30px;
 background:silver;
float:left;
margin-left:5px;
}
#spe{
position:absolute;
 left:40px;
 top:100px;
}
  </style>
 </head>

 <body>
  <div class="div1">内容1</div>
  <div class="div1" id="spe" >内容2</div>
  <div class="div1">内容3</div>
  <div class="div1">内容4</div>
    
 </body>
</html>

所谓绝对定位：对该元素最近的脱离了标准流的元素，如果没有父元素，则相对body左上角定位。

案例2：

<html>
 <head>
  <title> New Document </title>
  <style>
.div1{
 width:70px;
 height:30px;
 background:silver;
float:left;
margin-left:5px;
}
.div2{
position:relative;
left:100px;
top:100px;
 width:200px;
 height:150px;
 background:pink;
 float:left;
}
#spe{
position:absolute;
 left:40px;
 top:100px;
}
  </style>
 </head>

 <body>
  <div class="div1">内容1</div>
  
  <div class="div1">内容3</div>
  <div class="div1">内容4</div>
  <div class="div2"><div class="div1" id="spe" >内容2</div></div>
    
 </body>
</html>

fixed定位：

以视窗的左上角定位。

left,top对static 不起作用。

margin-left 和margin-top对static起作用。

z-index 层叠顺序，值越小，越在下面。

会编程的阿强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
33-定位

一、定位的种类1.static 静态定位（默认的定位方式）2.relative 相对定位3.absolute. 绝对定位4.fixed 固定定位相对定位：相对于原来的地方定位，图中的红点处，虽然离开了原来的地方，但是他的位置不能被别的地方占用 New Document .div1{ width:70px; height:30px;
复制链接

扫一扫