html中相对位置与绝对位置的具体使用


Posted in HTML / CSS onMay 15, 2022

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

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

html中相对位置与绝对位置的具体使用

标准模型,宽高均为内容(content)的宽高

html中相对位置与绝对位置的具体使用

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的长方形,下图是浏览器中的展示效果:

html中相对位置与绝对位置的具体使用

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

扩展:利用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中相对位置与绝对位置的具体使用的文章就介绍到这了!

 

Tags in this post...

HTML / CSS 相关文章推荐
CSS3实现div从下往上滑入滑出效果示例
Apr 28 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
Mar 13 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
跨域修改iframe页面内容详解
Oct 31 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 HTML / CSS
HTML基础详解(上)
Oct 16 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 HTML / CSS
CSS 左边固定宽右边自适应的6种方法
May 15 #HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 #HTML / CSS
css3 选择器
May 11 #HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
HTML CSS 一个标签实现带动画的抖音LOGO
常用的文件对应的MIME类型汇总
Apr 26 #HTML / CSS
通过feDisplacementMap和feImage实现水波特效
You might like
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
php封装的验证码类分享
2017/02/26 PHP
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
2016/01/06 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
Python退火算法在高次方程的应用
2018/07/26 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
.net C#面试题
2012/08/28 面试题
2013年入党人员的自我鉴定
2013/10/25 职场文书
业务部经理岗位职责
2014/01/04 职场文书
农村党支部先进事迹
2014/01/14 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
为自己工作观后感
2015/06/11 职场文书
工作态度怎么写
2015/06/25 职场文书
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL