文档章节

css中如何使用定位?

博为峰教研组
 博为峰教研组
发布于 2017/04/09 16:41
字数 727
阅读 2
收藏 0

css中最常用的定位方式有两种,分别是绝对定位和相对定位。这两者对于初学者来说是很不容易弄懂的。要真正理解绝对定位和相对定位,需要先知道一个知识点文档流。那么什么是文档流呢?

一.文档流

CSS的定位机制有3种:普通流、浮动(float:left/right/none)和定位。这里的普通流就是文档流,也就是说页面布局按照从左至右,一个挨一个的顺序排列的。

如果将元素的position属性设置为absolute即绝对定位。此时元素就会脱离文档流。同样如果给元素设置了浮动,也会脱离文档流。

了解了文档流之后,想必大家应该知道为什么使用定位了吧,那问题又来了,何时使用定位呢?

二.何时使用定位

一般设置样式不需要用到绝度定位和相对定位,当你想在网页 或一个div的上方漂浮着一个div ,让这个div挡住下面的div ,就想当于,绝对定位相对定位的div 踩在 了整个网页的上面。而且你还可以设置这个div的移动位置,让这个div 任意处在这个网页中的任何位置。一般新手,网页布局的不对,导致div不按照自己的想法布局,就设置相对定位绝对定位,导致其他的元素 也乱掉,最后全都要设置绝对定位了。所以在使用绝对定位和相对定位的时候一定要慎重。

 

1.相对定位:relative。相对于原来的位置移动,设置该属性值后该元素仍在文档流中,不影响其他元素的布局。

可以通过改变left,top,right,bottom等属性的值改变元素的位置。但不会影响其他元素的布局

运行结果:

现在对第2个div设置相对定位,对.div2的样式修改如下

 

此时运行结果如下:

 

对比可以看出,将div2设置为相对定位,它的left和top的值是相对于他自身的。而其他元素的位置不会受影响。

2.绝对定位: absolute.设置为绝对定位后,元素会脱离文档流,如果设置偏移量会影响其他元素的位置。

我们将例子中div2的定位方式改为绝对定位

 

运行结果:

 

由运行结果我们可以看出:

1.div2悬浮在页面上,偏移的位置就是设置的left和top的值。2.div2的原来占据的位置被div3占据了。导致div3的位置发生变化。

3.本例中没有设置div2的宽度,此时div2的宽度就是div2的内容。

 

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
CSS Positioning(定位)

Positioning(定位) CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么。 元素可以使用的顶部,底部,左侧和右侧属性定位。...

wybo521
2016/01/17
15
0
【前端Talkking】CSS系列——CSS深入理解之relative定位

1.前言 在前面的两篇文章:CSS深入理解之float浮动和CSS深入理解之absolute定位中,介绍了和的特性和使用方法,如果大家仔细阅读完了这两篇文章,相信你的CSS打怪技能又提高的一大截,那么趁...

micstone
2018/05/16
0
0
Java程序员从笨鸟到菜鸟之(十七)CSS基础积累总结(下)

七.组织元素(span和div) span和div元素用于组织和结构化文档,并经常联合class和id属性一起使用。 在这一课中,我们将进一步探究span和div的用法,因为这两个HTML元素对于CSS是很重要的。 ...

长平狐
2012/11/12
231
0
CSS中冷门却十分有用的calc()

     有没有想过 calc ()到底是什么? 往下面看下去你马上就会知道了!它可以用来在 CSS 中创建布局。 为此, 您也可以使用位置属性。   Css calc ()用于样式表内部的计算。 函数允许使...

webstack前端栈
2018/03/09
0
0
《HTML与CSS知识》系列分享专栏

收藏HTML和CSS方面的技术文章,作为一个WEB开发者,必须要知道HTML和CSS方面的知识,即使作为后台开发者也应该知道一些常用的HTML和CSS知识,甚至架构师也要了解,这样才会开发出实用的网站来...

开元中国2015
2018/10/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 白掌柜说了卖货不卖身

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @爱漫爱 :这是一场修行分享羽肿的单曲《Moony》 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :开不开心? 开心呀, 我又不爱睡懒觉…...

小小编辑
今天
8
0
大数据教程(11.7)hadoop2.9.1平台上仓库工具hive1.2.2搭建

上一篇文章介绍了hive2.3.4的搭建,然而这个版本已经不能稳定的支持mapreduce程序。本篇博主将分享hive1.2.2工具搭建全过程。先说明:本节就直接在上一节的hadoop环境中搭建了! 一、下载apa...

em_aaron
今天
3
0
开始看《JSP&Servlet学习笔记》

1:WEB应用简介。其中1.2.1对Web容器的工作流程写得不错 2:编写Servlet。搞清楚了Java的Web目录结构,以及Web.xml的一些配置作用。特别是讲了@WebServlet标签 3:请求与响应。更细致的讲了从...

max佩恩
今天
4
0
mysql分区功能详细介绍,以及实例

一,什么是数据库分区 前段时间写过一篇关于mysql分表的的文章,下面来说一下什么是数据库分区,以mysql为例。mysql数据库中的数据是以文件的形势存在磁盘上的,默认放在/mysql/data下面(可...

吴伟祥
今天
3
0
SQL语句查询

1.1 排序 通过order by语句,可以将查询出的结果进行排序。放置在select语句的最后。 格式: SELECT * FROM 表名 ORDER BY 排序字段ASC|DESC; ASC 升序 (默认) DESC 降序 1.查询所有商品信息,...

stars永恒
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部