文档章节

css中如何使用定位?

博为峰教研组
 博为峰教研组
发布于 2017/04/09 16:41
字数 727
阅读 2
收藏 0
点赞 0
评论 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的内容。

 

© 著作权归作者所有

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

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

wybo521
2016/01/17
15
0
Java程序员从笨鸟到菜鸟之(十七)CSS基础积累总结(下)

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

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

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

webstack前端栈
03/09
0
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
史上最全的web前端面试题汇总及答案2

HTML&CSS img的alt和title的异同? alt 是图片加载失败时,显示在网页上的替代文字; title 是鼠标放上面时显示的文字,title是对图片的描述与进一步说明; 这些都是表面上的区别,alt是img必要...

樱桃小丸子儿
2017/06/14
0
0
CSS 基础入门语法

盒模型--边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。 如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框:...

御前带刀红衬衫
2016/07/28
15
0
border属性的多方位应用和实现自适应三角形

属性是在实际的应用中使用频率比较高的一个属性,除了作为边框使用,利用border属性的一些特征以及表现方式,可以在实现一些比较常见的效果(如等高布局,上下固定内容滚动布局和绘制CSS图标...

深海鱼在掘金
2017/11/23
0
0
端程序员入门所要学习的16个知识点

1、HTML常用标签 语言是什么 、Web前端开发语言、 HTML超文本标记语言 、 网页主体结构 、常用标签、超链接(a标签)、Img图片标签 2、盒子模型 初探Div盒子模型 、css样式、 简单css样式、盒...

急速奔跑中的蜗牛
06/07
0
0
前端开发笔记(4)css基础(下)

标签定位 相对定位 相对定位是用来微调元素位置的,让元素相对于原来的位置进行调整。 绝对定位 绝对定位比相对定位更灵活 绝对定位脱离标准流:绝对定位的盒子,是脱离标准文档流的。所以,...

lxq_xsyu
2016/11/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

CVE-2013-0077 堆溢出分析

找了很久才发现这个环境比较容易搭建分析... 环境: 系统---Win XP SP3 漏洞程序:QQPlayer 3.7.892.400 出错DLL:quartz.dll 6.5.2600.5512 调试工具:x32db+gflag.exe 过程: 首先gflag设置...

Explorer0
16分钟前
5
0
python上传文件

//注意 <form action="/login/" method="post" enctype="multipart/form-data"> f=request.FILES.get('fafa') ff=open(f.name,mode='wb') for i in f.chunks(): ff.write(i) ff.close()......

南桥北木
29分钟前
0
0
CISCO VPN Client Reason 442 WIN8/10错误解决方案

http://jdkleo.iteye.com/blog/2163493 引用 http://my.oschina.net/cloudcoder/blog/220391?p={{currentPage 1}} 在使用cisco VPN 客户端登录时,产生Reason 442:Failedto enable Virtual......

chenfj_fer
32分钟前
0
0
信号量有没有容量限制?

之前一直误以为信号量初始化的时候那个初始化的值是信号量的“容量”,昨天同事指出了我的错误,最初我是不相信的,经过以下代码实践,证明了我的错误: Java版: import java.util.concurr...

锟斤拷烫烫烫
36分钟前
0
0
【RocketMQ】Message存储笔记

概述 消息中间件存储分为三种,一是保存在内存中,速度快但会因为系统宕机等因素造成消息丢失;二是保存在内存中,同时定时将消息写入DB中,好处是持久化消息,如何读写DB是MQ的瓶颈;三是内...

SaintTinyBoy
47分钟前
0
0
Android应用Context详解及源码解析

Android应用Context详解及源码解析 本文定位:优质文章收集 本文转载 1 背景 今天突然想起之前在上家公司(做TV与BOX盒子)时有好几个人问过我关于Android的Context到底是啥的问题,所以就马...

lichuangnk
今天
0
0
PostgreSQL的昨天今天和明天

PostgreSQL 是一种非常复杂的对象-关系型数据库管理系统(ORDBMS), 也是目前功能最强大,特性最丰富和最复杂的自由软件数据库系统。有些特性甚至连商业数据库都不具备。 这个起源于伯克利(...

闻术苑
今天
1
0
Mysql对自增主键ID进行重新排序

1,删除原有主键: ALTER TABLE `table_name` DROP `id`; 2,添加新主键字段: ALTER TABLE `table_name` ADD `id` MEDIUMINT( 8 ) NOT NULL FIRST; 3,设置新主键: ALTER TABLE `table_nam......

niithub
今天
0
0
福利篇:免费csdn vip账号分享

分享一个发布免费csdn vip账号的网站:啰嗦vip www.lostvip.com , 各种软件开发类的视频教程:慕课网、动脑学院、黑马各大培训机构VIP视频教程,非常不错!

在水一方发盐人
今天
1
0
Nginx+Tomcat搭建高性能负载均衡集群

一、 工具   nginx-1.8.0   apache-tomcat-6.0.33 二、 目标   实现高性能负载均衡的Tomcat集群:    三、 步骤   1、首先下载Nginx,要下载稳定版:      2、然后解压两个Tom...

码代码的小司机
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部