html中相对位置与绝对位置

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

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

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

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>下生成多个换行标签<br>

<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="D:\各类型文档\css\lesson2.css">
</head>
<body><div>爱国敬业文明民主和谐...</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

下面是css的代码：

*{margin: 0;padding: 0;
}
div{position: fixed;width: 50px;height: 200px;left: 0;top: 300px;background-color: green;
}

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

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

扩展：利用position的absolute属性可以实现奥运五环的效果，absolute是相对父级的位置来定位的，首先可以写一个<div></div>来作为五环的画布也就是父级<div>，这个父级标签是居中的设置它的left和top属性均为相对于页面的50%大小，margin-left和margin-top也需要调整对应的负数像素，这样不管浏览器是否缩放与全屏父级标签均保持在屏幕正中央，同时父级标签也不能随着鼠标滚轮的滚动而改变位置设置position属性为fixed。

画圆的时候将圆角的弯曲程度改为50%即为正圆，五环的上面三个圆高宽相同，相隔距离相同，相对于父级边框的位置不同，即两圆之间向隔一个圆的宽度加上一定的像素，这里我设置的圆的宽高为170px，间隔为50px则两圆的圆心距离为220px。下面的两个圆与上面的三个圆高度不同具体高度可以自行设置margin-top并将z-index的属性设为1，表明下面的两个圆覆盖在上面的三个圆上，五个圆都在画布父类中故position属性为absolute相对与父类的位置。

html代码如下：

<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="D:\各类型文档\css\lessone3.css">
</head>
<body><div class="wrapper"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div></div>
</body>
</html>

css代码如下:

*{margin: 0;padding: 0;
}
.wrapper{position: fixed;left: 50%;top: 50%;border: 2px;width: 1000px;height: 700px;background-color: #999;margin-left: -500px;margin-top: -350px;
}
.box1{position: absolute;margin-left: 200px;margin-top: 200px;width: 170px;height: 170px;border: 10px solid #006;border-radius: 50%;
}
.box2{position: absolute;margin-left: 420px;margin-top: 200px;width: 170px;height: 170px;border: 10px solid black;border-radius: 50%;
}
.box3{position: absolute;margin-left: 640px;margin-top: 200px;width: 170px;height: 170px;border: 10px solid #B00;border-radius: 50%;
}
.box4{position: absolute;margin-left: 310px;margin-top: 300px;width: 170px;height: 170px;border: 10px solid yellow;border-radius: 50%;z-index: 1;
}
.box5{position: absolute;margin-left: 530px;margin-top: 300px;width: 170px;height: 170px;border: 10px solid green;border-radius: 50%;z-index: 1;
}

页面效果如下：

感谢观看！

html中相对位置与绝对位置相关推荐

html网页在指定位置嵌入表格,网页制作中表格的主要作用网页制作中插入表格怎么调整位置...
在网页设计中,表格有什么重要作用 1．当需要提交所有数据时,可以提交整个100个表,如果不使用表,可以逐个提交. 2．表格设计简洁美观,方形,与网页的设计非常一致. 3．网站其实是一个大版本的表格,数 ...
pandas使用drop函数删除dataframe中指定索引列表对应位置的数据行（drop multiple rows in dataframe with integer index）
pandas使用drop函数删除dataframe中指定索引列表对应位置的数据行(drop multiple rows in dataframe with integer index) 目录
Seaborn使用violinplot函数可视化多分组小提琴图（violin plot）、每个小提琴图内部包含两个分组、使用inner函数设置在小提琴图中使用虚线显示分位数位置
Seaborn使用violinplot函数可视化多分组小提琴图(violin plot).每个小提琴图内部包含两个分组.使用inner函数设置在小提琴图中使用虚线显示分位数位置(inner = 'qu ...
R语言str_sub函数从字符串中提取或替换子字符串（substring）：str_sub函数指定起始位置和终止位置抽取子字符、str_sub函数指定起始位置和终止位置替换子字符串
R语言str_sub函数从字符串中提取或替换子字符串(substring):str_sub函数指定起始位置和终止位置抽取子字符.str_sub函数指定起始位置和终止位置替换子字符串目录
在windows中python安装sit-packages路径位置在Pycharm中导入opencv不能自动代码补全问题
一.在windows中python安装sit-packages路径位置 C:\Users\shl\AppData\Local\Programs\Python\Python36\Lib\site-pac ...
C语言实例第4期：交换数组中最大数和最小数的位置
C语言文章更新目录 C语言学习资源汇总,史上最全面总结,没有之一 C/C++学习资源(百度云盘链接) 计算机二级资料(过级专用) C语言学习路线(从入门到实战) 编写C语言程序的7个步骤和编程机制 C ...
计算机怎样调整工作表位置,图表布局中调整图表大小和位置及跨工作表移动——想象力电脑应用...
通过前面四篇文章的介绍,对于Excel 2013工作簿中图表的制作应该都有了很清晰的认识和了解.对于最基本的图表元素的添加和编辑都进行了详细的介绍.但我们制作的图表没有修改过大小,且图表位置始终是在表 ...
Java黑皮书课后题第4章：*4.3（几何：估算面积）应用4.1节图中以下地点的GPS位置：Georgia州的Atlanta……计算被这四个城市所围起来的区域面积
*4.3(几何:估算面积)应用4.1节图中以下地点的GPS位置:Georgia州的Atlanta.Florida州的Orlando.Georgia州的Savannah.North Carolina的C ...
每天一道LeetCode-----给定字符串s和字符数组words，在s中找到words出现的位置，words内部字符串顺序无要求
Substring with Concatenation of All Words 原题链接Substring with Concatenation of All Words 题目意思是给定字符串s和 ...
python for in语句 index_使用for循环查找句子中的单词及其索引位置
我正在编写一个代码,提示用户输入一个句子,然后定义为str1,然后提示输入一个定义为str2的单词. 例如:Please enter a sentence: i like to code in pyt ...

html中相对位置与绝对位置

html中相对位置与绝对位置相关推荐

最新文章

热门文章