CSS定位之position详解
position属性
在前端中,position是很常见的属性。通过这个属性可以调整dom元素在浏览器中显示的位置。
它有几个常用的属性:
- static 默认值。通常是在覆盖
absolute
或者relative
样式时使用。 - relative 相对定位。相对于原本自己的位置,其他的元素样式不会发生改变。
- position 绝对定位。相对于最近的一个应用absolute或者relative的父元素,然后相对这个元素进行定位。
- fixed 相对浏览器定位。
- inherit 继承父样式。
其中relative、position、fixed比较难于理解,下面就介绍下这三个:
relative
看意思是相对定位,那么是相对什么进行定位呢?其实是相对它原本的位置。比如学生站队,教练喊小明。小明出队,向前走了一步。
这就相当于:
小明{
position:relative;
向前一步!
}
看图也容易理解,原本三个span的位置为:
<html>
<body>
<span class="span-1" style="background-color:red;padding:10px;">1</span>
<span class="span-2" style="background-color:blue;padding:10px;">2</span>
<span class="span-3" style="background-color:green;padding:10px;">3</span>
</body>
</html>
当我们对第2个span添加相对定位后,它先对于原始的位置偏移。
<html>
<head>
<style type="text/css">
.span-2 {
position:relative;
top:10px;
left:10px;
}
</style>
</head>
<body>
<span class="span-1" style="background-color:red;padding:10px;">1</span>
<span class="span-2" style="background-color:blue;padding:10px;">2</span>
<span class="span-3" style="background-color:green;padding:10px;">3</span>
</body>
</html>
absolute
这个属性比较复杂,看属性的名字是绝对定位,其实不然。
它也是一种相对定位,不过相对的不再是自己,而是父元素。具体是哪个父元素,就要看父元素是否应用了position属性。
举个例子,最开始我们有3个嵌套的div
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<div class="div-1" style="background-color:red;padding:10px;">1
<div class="div-2" style="background-color:blue;padding:10px;">2
<div class="div-3" style="background-color:green;padding:10px;width:20px;height:20px;">3
</div>
</div>
</div>
</body>
</html>
如果对第3个div应用absolute定位,那么会出现下面的效果:
<html>
<head>
<style type="text/css">
.div-3 {
position:absolute;
right:0;
top:0;
}
</style>
</head>
<body>
<div class="div-1" style="background-color:red;padding:10px;">1
<div class="div-2" style="background-color:blue;padding:10px;">2
<div class="div-3" style="background-color:green;padding:10px;width:20px;height:20px;">3
</div>
</div>
</div>
</body>
</html>
如果对div-1应用position为relative或者absolute,则div-3就会相对div-1进行定位。
<html>
<head>
<style type="text/css">
.div-1{position:relative;}
.div-3 {
position:absolute;
right:0;
top:0;
}
</style>
</head>
<body>
<div class="div-1" style="background-color:red;padding:10px;">1
<div class="div-2" style="background-color:blue;padding:10px;">2
<div class="div-3" style="background-color:green;padding:10px;width:20px;height:20px;">3
</div>
</div>
</div>
</body>
</html>
由此可以看出,如果父元素没有应用position样式,那么就会继续向上查找,直到html元素。如果都没有找到,absolute就会根据html进行定位;相反,如果找到某个父元素有absolute或者relative或者fixed,则会先对这个元素进行定位。
fixed
这个就比较容易理解了,它是相对浏览器的窗口进行定位。
比如博客园的推荐按钮,或者导航,都可以应用这个position样式。
CSS定位之position详解的更多相关文章
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
- CSS定位之position详解(转载)
本文转载于xingoo的博文:http://www.cnblogs.com/xing901022/p/5193751.html position属性 在前端中,position是很常见的属性.通过这 ...
- [TimLinux] CSS float和position详解
1.1. 定义 摘自w3school:float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它 ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- css过渡和2d详解及案例
css过渡和2d详解及案例(案例在下方,不要着急) 本文重点: 1.在2D变化使用过程中,有些需求需要两种或两种以上的变化同时使用, 值得注意的是尽量把位移变化放在最前面,把其他变化放在最后面,属性值 ...
- css之Grid Layout详解
css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...
- css样式继承规则详解
css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
- Css盒模型属性详解(margin和padding)
Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...
随机推荐
- JSP中的数据库操作,MySQL基础操作(一)
一.JDBC JDBC(java data base concectivity),是一种用于执行SQL语句的java API,可以为多种关系库提供统一访问. 通常使用JDBC完成以下操作: 1)同数据 ...
- FragmentManager V4包下 应该用FragmentActivity
import android.os.Bundle; import android.support.v4.app.FragmentActivity; public class MainActivity ...
- IDEA安装小配置
1. view-->toolbar+toolbuttons 2. 根据大小写IDEA能准确提示 配置自动导入包 定义代码模板 提示忽略大小写 配置虚拟机内存,修改idea64.exe.vmopt ...
- idea spring-boot gradle mybatis 搭建开发环境
使用工具idea 2017.2开发,gradle构建项目,使用的技术有spring-boot.mybatis 1.新建项目 说明:1.src为源码路径,开发主要在src下 2.src/main/jav ...
- c# sharpsvn 客户端开发测试
1:没有工作副本,上传时会报错的. 会提示本地目录不是not a working copy 而此中文名称就是工作副本, 本地要与svn服务器公用的一个文件夹. 所以每次要checkout 然后才能 ...
- android使用Pull解析来自服务器的xml文件时出现错误以及解决方案
直接上代码,代码中有详细注释: 1 public class CheckUpdateManager { 2 private static final String TAG = "CheckU ...
- java1.8 版本改成 java1.7版本
以前先安装的java1.7 大部分程序应该都是只支持1.7 不支持1.8 但是因为要跑一个别人的项目 要求是java1.8 所以想在电脑上同时装1.7和1.8 到官网上下载1.8 安装 安装完成后 并 ...
- vue 中使用keepAlive状态保持
keepAlive状态保持 1 主要实现原理,状态保持的路由不会执行生命周期的钩子函数,只有第一次进入页面会执行钩子函数. 2 设置当前页面保持keepAlive 直接在路由meta中配置即可 m ...
- 201621123008 《Java程序设计》第14周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造你的系统.要建立什么表?截图你的表设计. 分 ...
- 爬虫初窥day4:requests
Requests 是使用 Apache2 Licensed 许可证的 HTTP 库.用 Python 编写,真正的为人类着想. Python 标准库中的 urllib2 模块提供了你所需要的大多数 ...