准备前的知识：

定位只对块级起作用。如div,p等元素是块级元素，如果是内联元素则可以先变成块级元素，display:block即可。

开始讲解:

定位共四种：static,fixed,relative,absolute.

第一种:static为div默认，top,left,bottom,right无用。

第二种:fixed为固定定位。

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动.
Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。

第三种：relative为相对定位

相对定位元素的定位是相对其正常位置。可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。

第四种：absolute为绝对定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素和其他元素重叠。

总结：

序列 position定位属性 是否占空间 是否与元素重叠
1 fixed 不占　　 重叠
2 relative 占　　 可以控制top,left与其他元素重叠
3 absolute 不占 重叠

常用技巧：
relative与absolute配合使用:
最外div使用relative定位，里面用absolute定位。

Css Position定位(简易版本)的更多相关文章

  1. 教你玩转CSS Position(定位)

    CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...

  2. CSS Position 定位属性

    本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...

  3. [CSS]position定位

    CSS position 属性 通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式. position 属性值的含义: static 元素框正常生成.块级元 ...

  4. CSS position(定位)属性

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...

  5. CSS| position定位和float浮动

    对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...

  6. css - Position定位属性与层级关系

    今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: <!DOCTYPE html> <html> <he ...

  7. CSS Position 定位属性介绍

    1.介绍 1.1 说明 Position 属性:规定元素的定位类型.即元素脱离文档流的布局,在页面的任意位置显示. 1.2 主要的值 ①absolute :绝对定位:脱离文档流的布局,遗留下来的空间由 ...

  8. <转载>DIV+CSS position定位方法总结

    如何学习DIV+CSS布局之position属性 如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用 absolute. 任 ...

  9. CSS Position定位过多是否会影响浏览器渲染速度

    一直有个传说就是页面里的Position多了会影响浏览器渲染速度,今天做个测试看看结果如何. 检验的方法: 动态创建一定数量的div > 开始计算时间 > 导入css文件渲染 > o ...

随机推荐

  1. Docker容器技术的核心原理

    目录 1 前言 2 docker容器技术 2.1 隔离:Namespace 2.2 限制:Cgroup 2.3 rootfs 2.4 镜像分层 3 docker容器与虚拟机的对比 1 前言 上图是百度 ...

  2. Python之多线程与多进程（二）

    多进程 上一章:Python多线程与多进程(一) 由于GIL的存在,Python的多线程并没有实现真正的并行.因此,一些问题使用threading模块并不能解决 不过Python为并行提供了一个替代方 ...

  3. webdriver高级应用- 使用日志模块记录测试过程中的信息

    在自动化脚本执行过程中,使用Python的日志模块记录在测试用例执行过程中一些重要信息或者错误日志等,用于监控和后续调试脚本. 在pycharm下新建工程,并创建Log.py.Logger.conf以 ...

  4. doc下设置永久环境变量的好方法

    http://www-2w.blog.163.com/blog/static/97931518201021211123267/ 需要查看命令具体实现:setx machine “%path%”. 配置 ...

  5. re——正则表达式

    常用的表达式规则 '.' 默认匹配除\n之外的任意一个字符,若指定flag DOTALL,则匹配任意字符,包括换行 '^' 匹配字符开头,若指定flags MULTILINE,这种也可以匹配上(r&q ...

  6. jade和ejs两者的特点

    jade特点 1超强的可读性 2灵活易用的缩进 3块扩展 4代码默认进过编码处理,以增强安全性 5编译及运行时的上下文错误报告 6命令行编译支持 7html5模式(使用 !!!5文档类型) 8可选的内 ...

  7. 【转】Linux多命令顺序执行连接符(; || && |)

    当我们需要一次执行多个命令的时候,命令之间需要用连接符连接,不同的连接符有不同的效果.下面我们总结一下,加以区分. (1)  ;  分号,没有任何逻辑关系的连接符.当多个命令用分号连接时,各命令之间的 ...

  8. Timus 1329. Galactic History。LCA最近公共祖先或dfs递归离线处理！

    1329. Galactic History 比赛的时候看到学弟A了这题然后跟榜做,结果在LCA的道路上一去不复返,这个题是很像LCA求最近公共祖先的,不过三个人都没学过LCA,只能拿着资料看着像然后 ...

  9. ssh 远程执行绝对路径命令mysqld_multi 报my_print_defaults不存在

    通过SSH直接执行远程命令(这种方式会使用Bash的non-interactive + non-login shell模式)找不到命令参考:http://ghoulich.xninja.org/201 ...

  10. isinstance 和 type 的区别

    class A: pass class B(A): pass isinstance(A(), A) # returns True type(A()) == A # returns True isins ...