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详解的更多相关文章

  1. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  2. CSS定位之position详解(转载)

    本文转载于xingoo的博文:http://www.cnblogs.com/xing901022/p/5193751.html  position属性 在前端中,position是很常见的属性.通过这 ...

  3. [TimLinux] CSS float和position详解

    1.1. 定义 摘自w3school:float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它 ...

  4. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  5. css过渡和2d详解及案例

    css过渡和2d详解及案例(案例在下方,不要着急) 本文重点: 1.在2D变化使用过程中,有些需求需要两种或两种以上的变化同时使用, 值得注意的是尽量把位移变化放在最前面,把其他变化放在最后面,属性值 ...

  6. css之Grid Layout详解

    css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...

  7. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  8. css样式继承规则详解

    css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...

  9. Css盒模型属性详解(margin和padding)

    Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...

随机推荐

  1. JSP中的数据库操作,MySQL基础操作(一)

    一.JDBC JDBC(java data base concectivity),是一种用于执行SQL语句的java API,可以为多种关系库提供统一访问. 通常使用JDBC完成以下操作: 1)同数据 ...

  2. FragmentManager V4包下 应该用FragmentActivity

    import android.os.Bundle; import android.support.v4.app.FragmentActivity; public class MainActivity ...

  3. IDEA安装小配置

    1. view-->toolbar+toolbuttons 2. 根据大小写IDEA能准确提示 配置自动导入包 定义代码模板 提示忽略大小写 配置虚拟机内存,修改idea64.exe.vmopt ...

  4. idea spring-boot gradle mybatis 搭建开发环境

    使用工具idea 2017.2开发,gradle构建项目,使用的技术有spring-boot.mybatis 1.新建项目 说明:1.src为源码路径,开发主要在src下 2.src/main/jav ...

  5. c# sharpsvn 客户端开发测试

    1:没有工作副本,上传时会报错的. 会提示本地目录不是not a working copy   而此中文名称就是工作副本, 本地要与svn服务器公用的一个文件夹. 所以每次要checkout 然后才能 ...

  6. android使用Pull解析来自服务器的xml文件时出现错误以及解决方案

    直接上代码,代码中有详细注释: 1 public class CheckUpdateManager { 2 private static final String TAG = "CheckU ...

  7. java1.8 版本改成 java1.7版本

    以前先安装的java1.7 大部分程序应该都是只支持1.7 不支持1.8 但是因为要跑一个别人的项目 要求是java1.8 所以想在电脑上同时装1.7和1.8 到官网上下载1.8 安装 安装完成后 并 ...

  8. vue 中使用keepAlive状态保持

      keepAlive状态保持 1 主要实现原理,状态保持的路由不会执行生命周期的钩子函数,只有第一次进入页面会执行钩子函数. 2 设置当前页面保持keepAlive 直接在路由meta中配置即可 m ...

  9. 201621123008 《Java程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造你的系统.要建立什么表?截图你的表设计. 分 ...

  10. 爬虫初窥day4:requests

      Requests 是使用 Apache2 Licensed 许可证的 HTTP 库.用 Python 编写,真正的为人类着想. Python 标准库中的 urllib2 模块提供了你所需要的大多数 ...