定位的基本语法：

position:方式 top: 多少px; right: 多少px; left: 多少px; bottom: 多少px;

有常用的几种方式            ，如下：

第一种：相对定位 relative

首先
 
  
 
  
 
  
 
  
 
  
 
，相对










，就是相对某一位置  
  
  
  
  
  ，这里指的是相对原来的位置 
  
  
  
  
  
，不脱离标准文档流            。

那么标准文档流是什么？

就是元素排版布局过程中


 


 


 


 


 

，元素会默认自动从左往右 
 
 
 
 
 ，从上往下的流式排列方式
 
  
 
  
 
  
 
  
 
  
 
。并最终窗体自上而下分成一行行  
   
   
   
   
   
，并在每行中从左至右的顺序排放元素










。

我们在这里先写一个样式：

这是两个块级元素：

<div class="box1"></div> <div class="box2"></div>

现在给他们添加简单样式：

<style> .box1 { width: 50px; height: 50px; background-color: pink; position: relative; top: 10px; left: 10px; } .box2 { width: 20px; height: 20px; background-color: skyblue; } </style>

在不添加定位时

 

 

 

 

 
，页面显示是这样的：

 在添加相对定位以后
 

 

 

 

 

 ，页面显示是这样的：

 可以看出粉色的相对于他原来的的位置           ，距离顶部和左边都是10px  
  
  
  
  
  。这就是相对定位 
  
  
  
  
  
。

第二种：绝对定位 absolute

绝对定位通常发生父子标签中
 

 
 

 
 

 
 

 
 

 
 
，脱离标准文档流










，不保留原本的位置


 


 


 


 


 

。

这里要分为两种情况：

情况一：无父亲 或 父亲无定位

同样先写一个有父子关系的标签：

<div class="father"> <div class="son"></div> </div>

然后给他们添加样式：情况一父标签中没有定位

<style> .father { margin-top: 50px; margin-left: 50px; width: 100px; height: 100px; background-color: skyblue; } .son { position: absolute;//绝对定位 top: 20px; left: 20px; width: 50px; height: 50px; background-color: pink; } </style>

在字标签中中没有定位时：

注意：此时父标签连带着子标签距离页面左边和顶部都有50px的距离 
 
 
 
 
 。

在字标签中中添加有定位时：

由于直系父标签中没有定位                 ，所以字标签会一直向上查找
 
 
 
 
 
 
 
 
 
 
 
，直到找到有定位的父标签















，这个案例中            ，找到的就是页面  
   
   
   
   
   
。所以它的绝对定位
 
  
 
  
 
  
 
  
 
  
 
，是距离页面的定位










，左边和顶部各相距10px.如图：

情况二：父亲有定位

还是上面情况一的案例  
  
  
  
  
  ，我们此时添加一个相对定位给父标签：position: relative 
  
  
  
  
  
，

看看会有什么变化？

.father { position: relative; margin-top: 50px; margin-left: 50px; width: 100px; height: 100px; background-color: skyblue; }

 字标签是相对于父标签的绝对定位

 

 

 

 

 
。

第三种：固定定位 fixed

还是一样


 


 


 


 


 

，写一个测试标签

<div class="divA"> <img src="./img/羊驼.jpg" height="100px" width="120px"> </div> <p>这是一段文字</p><p>这是一段文字</p> <p>这是一段文字</p><p>这是一段文字</p> <p>这是一段文字</p><p>这是一段文字</p> <p>这是一段文字</p><p>这是一段文字</p> ... //页面上写很多字 用来测试

现在给div块添加样式 
 
 
 
 
 ，加一个固定定位：

<style> .divA{ position: fixed; top: 100px; left: 40px; } </style>

 这个图片的位置是固定的  
   
   
   
   
   
，就算在文字很多的情况下

 

 

 

 

 
，也不随鼠标的滚动而变动
 

 

 

 

 

 。

这有点像我们在网页有时候会碰到的悬浮广告
 

 

 

 

 

 ，或者手机上的悬浮按钮           ，当然没有手机那么高级
 

 
 

 
 

 
 

 
 

 
 
，有兴趣的可以试下           。

固定定位还有一个特点










，就是加入别的块占了他要固定的位置                 ，他就会环绕着这个块分布
 

 
 

 
 

 
 

 
 

 
 
。

第四种：粘性定位 sticky

粘性定位使用时：

父元素不能overflow:hidden或者overflow:auto属性










。

父元素的高度不能低于sticky元素的高度

sticky元素仅在其父元素内生效

同样先写一个父子块：

<div class="nav"> <div class="navSon"></div> </div>

并添加样式；

<style> .nav{ width: 100px; height: 100px; background-color: pink; } .nav .navSon{ position: sticky; top: 20px; left: 20px; width: 50px; height: 50px; background-color: skyblue; } </style>

页面显示的样式是：

 以上就是几种定位方式                 。