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

描述一个地区的位置有两种方法：相对位置和绝对位置。本文主要介绍了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>

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

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

转载自：https://www.weidianyuedu.com

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

计算机怎样调整工作表位置,图表布局中调整图表大小和位置及跨工作表移动——想象力电脑应用...
通过前面四篇文章的介绍,对于Excel 2013工作簿中图表的制作应该都有了很清晰的认识和了解.对于最基本的图表元素的添加和编辑都进行了详细的介绍.但我们制作的图表没有修改过大小,且图表位置始终是在表 ...
linux收缩java位置,找到linux中当前java的安装位置
先看java -version $java version "1.8.0_111" Java(TM) SE Runtime Environment (build 1.8.0_111 ...
js数组查找最接近_在JavaScript数组中找到最小元素的位置
在JavaScript数组中找到最小元素的位置注* 之前有篇文章介绍过数据遍历的性能比较: for in 比for loop慢至少20倍 ,这是另外一篇比较数组查找性能的例子,通过对手工/inde ...
python多维数组添加元素_numpy中三维数组中加入元素后的位置详解
今天做数据处理时,遇到了从三维数组中批量加入二维数组的需求.其中三维数组在深度学习的特征数据处理时经常会使用到,所以读者有必要对该小知识点做到清楚了解并掌握.现对三维数组中的元素位置结合代码做详细归纳 ...
前端屏幕尺寸和分辨率_web前端开发中常用的尺寸和位置
我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...
无需写代码，在EXCEL表中定位坐标所在地图位置
一前言 EXCEL是我们日常工作学习数据处理的办公软件,操作易上手,几乎人人都会用.EXCEL表格能够处理各种数据,包括经纬度坐标数据,然而EXCEL自带的功能仅能对坐标数据进行增删改等常规的操作. ...
html怎样设置form的位置,html中 table 和 form的位置
对于web前端开发来说经常会用到像firebug这样审查元素工具发现了一个这样的现象: 当 able> .... 在firebug下会看到这种情况下动态增加的控件,提交表单获取不到内 ...
html中form位置局中,html中 table 和 form的位置
对于web前端开发来说经常会用到像firebug这样审查元素工具发现了一个这样的现象: 当 able> .... 在firebug下会看到这种情况下动态增加的控件,提交表单获取不到内 ...
html网页在指定位置嵌入表格,网页制作中表格的主要作用网页制作中插入表格怎么调整位置...
在网页设计中,表格有什么重要作用 1．当需要提交所有数据时,可以提交整个100个表,如果不使用表,可以逐个提交. 2．表格设计简洁美观,方形,与网页的设计非常一致. 3．网站其实是一个大版本的表格,数 ...

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

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

最新文章

热门文章