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之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
Jun 11 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
详解CSS故障艺术
May 25 HTML / CSS
html网页引入svg图片的4种方式
Aug 05 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
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
PHP正则验证Email的方法
2015/06/15 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
javascript实现原生ajax的几种方法介绍
2013/09/21 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
浅谈Python中的字符串
2020/06/10 Python
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
律师授权委托书范本
2014/10/07 职场文书
爱国教育主题班会
2015/08/14 职场文书
教师个人教学反思
2016/02/23 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
Docker下安装Oracle19c
2022/04/13 Servers