文档章节

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
CSS中冷门却十分有用的calc()

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

webstack前端栈
03/09
0
0
Java程序员从笨鸟到菜鸟之(十七)CSS基础积累总结(下)

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

长平狐
2012/11/12
200
0
【前端Talkking】CSS系列——CSS深入理解之relative定位

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

micstone
05/16
0
0
CSS2--入门到精通实用最全

**-----CSS2-----** 1.CSS特点简介 (1)CSS 指层叠样式表 (Cascading Style Sheets) (2)样式定义如何显示 HTML 元素 (3)样式通常存储在样式表中 (4)把样式添加到 HTML中是为了解决内容...

我是宁采臣
2016/12/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

09-利用思维导图梳理JavaSE-

09-利用思维导图梳理JavaSE-Java IO流 主要内容 1.Java IO概述 1.1.定义 1.2.输入流 - InputStream 1.3.输出流 - OutputStream 1.4.IO流的分类 1.5.字符流和字节流 2.InputStream类 2.1.File...

飞鱼说编程
22分钟前
1
0
Spring Cloud 微服务的那点事

在详细的了解SpringCloud中所使用的各个组件之前,我们先了解下微服务框架的前世今生。 单体架构 在网站开发的前期,项目面临的流量相对较少,单一应用可以实现我们所需要的功能,从而减少开...

我是你大哥
31分钟前
1
0
步步深入MySQL:架构->查询执行流程->SQL解析顺序

一、前言 一直是想知道一条SQL语句是怎么被执行的,它执行的顺序是怎样的,然后查看总结各方资料,就有了下面这一篇博文了。 本文将从MySQL总体架构--->查询执行流程--->语句执行顺序来探讨一...

Java干货分享
45分钟前
1
0
gson1.7.1线程并发导致空指针问题

java.lang.NullPointerExceptionat com.google.gson.FieldAttributes.getAnnotationFromArray(FieldAttributes.java:231)at com.google.gson.FieldAttributes.getAnnotation(FieldAttribut......

东风125
今天
3
0
以太坊RPC接口使用

以太坊RPC接口文档: https://github.com/ethereum/wiki/wiki/JSON-RPC#web3_clientversion 使用方式: 比如我要调用某个合约的balanceOf(address _owner)方法。 因为没有改变合约的状态,所以...

王坤charlie
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部