html中相对位置与绝对位置介绍

亦凉 2024-03-31 14:58 100阅读 0赞

描述一个地区的位置有两种方法：相对位置和绝对位置。本文主要介绍了html中相对位置与绝对位置的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着[微点阅读][Link 1]小编来一起学习学习吧

用户在浏览网站时经常会看到左侧有一种宣传栏，它不会随着鼠标滚动而不被用户看到，它会始终以页面的中心为参照物始终保持在左侧一个固定的位置，今天我们来做一下这个小例子，让我们先了解一下盒模型和相对丶绝对位置的前端知识。

盒模型分为两种一种是标准模型，另一种是IE模型，它的组成由外向里是margin，border，padding，content，如下两个图所示。

![4b423319b1f318ccdcc1d405f587bc27.jpeg][]

**标准模型，宽高均为内容（content）的宽高**

![85850165c401ae7702d62067e00d9124.jpeg][]

**IE模型，宽高为内容(content)+填充(padding)+边框(border)的总宽高。**

通常情况我们计算盒模型宽高是计算IE模型的宽高，利用上面的公式我们计算一下这个css代码中的宽高，div\{ width: 200px; height: 200px; /\*只给出一个数值表面盒模型的边框大小相同\*/ border: 10px solid black; /\*如果给出四个数值顺序为上右下左，如果三个是上（左右）下， 如果两个是（上下）（左右），如果一个则大小相同\*/ padding: 10px 20px 30px; margin: 10px 20px;  
\}

宽为：200+10\*2+20\*2=260px，高为：200+10\*2+10+30=260px，要注意的是边框（border）和填充（padding）要各计算两次，如果有content的值也要加上。

在用CSS+DIV进行布局定位的时候，一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚，以致经常会出现让人很郁闷的结果。这里我们在此总结一下：

先看下position各个属性值的定义：

1、static：默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。

2、relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级，relative作为参照物，absolute来定位，relative保留原来的位置进行定位。

3、absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。可通过z-index进行层次分级，absolute会相对与最近的父级的定位来定位，如果父级没有定位则会相对与文档定位也就是说脱离原来的位置进行定位。

4、fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定，利用该属性来制作我们今天的例子，可通过z-index进行层次分级。

注意：z-index是数学模型中的z轴，也就是说电脑屏幕离我们面部的距离远近，该值默认为0可以改变数值的大小来改变这个距离从而分成不同的层。

回顾下上面的内容就可以着手做我们的广告栏了，首先在html文件中新建一个<div></div>，为了显示效果在<div>下生成多个换行标签

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 </td> 
 <td> <code>&lt;!DOCTYPE html&gt;</code> <code>&lt;</code><code>html</code><code>&gt;</code> <code>&lt;</code><code>head</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>title</code><code>&gt;&lt;/</code><code>title</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>link</code> <code>rel</code><code>=</code><code>"stylesheet"</code> <code>type</code><code>=</code><code>"text/css"</code> <code>href</code><code>=</code><code>"D:\各类型文档\css\lesson2.css"</code><code>&gt;</code> <code>&lt;/</code><code>head</code><code>&gt;</code> <code>&lt;</code><code>body</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code><code>&gt;爱国敬业文明民主和谐...&lt;/</code><code>div</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&lt;/</code><code>body</code><code>&gt;</code> <code>&lt;/</code><code>html</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

下面是css的代码：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>*{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>margin</code><code>: </code><code>0</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>padding</code><code>: </code><code>0</code><code>;</code> <code>}</code> <code>div{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>position</code><code>: </code><code>fixed</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width</code><code>: </code><code>50px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height</code><code>: </code><code>200px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>left</code><code>: </code><code>0</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>top</code><code>: </code><code>300px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color</code><code>: </code><code>green</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

可以看到css代码首先将填充和外边距设置为0，这也是我们在开发前端css代码时首先做的事情将默认的数值清0，接下来设置的是div的属性fixed属性将盒模型定位，盒模型是一个紧贴浏览器左侧距离上部300px的长方形，下图是浏览器中的展示效果：

![c408ea7e2456c78f04679004c6d7d4e3.png][]

这样我们就实现了鼠标滚动而广告栏不随着移动定位在固定位置的效果。

转载自：[https://www.weidianyuedu.com][Link 1]

[Link 1]: https://www.weidianyuedu.com
[4b423319b1f318ccdcc1d405f587bc27.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/7b18ef496c2b4dff86b92d694f9a3866.jpeg
[85850165c401ae7702d62067e00d9124.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/3bce1a57dfb84071a547823c7a2ecda0.jpeg
[c408ea7e2456c78f04679004c6d7d4e3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/00473ece02264e5194b7e46686e6df4f.png