准备前的知识：

定位只对块级起作用。如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. hdu 4565

    Problem Description A sequence Sn is defined as:Where a, b, n, m are positive integers.┌x┐is the cei ...

  2. JAVA里的单引号和双引号及String和char的区别

    JAVA里的单引号和双引号及String和char的区别 单引号引的数据 是char类型的双引号引的数据 是String类型的单引号只能引一个字符而双引号可以引0个及其以上 ************* ...

  3. MySQL主从复制(Master-Slave)

    MySQL数据库自身提供的主从复制功能可以方便的实现数据的多处自动备份,实现数据库的拓展.多个数据备份不仅可以加强数据的安全性,通过实现读写分离还能进一步提升数据库的负载性能. 下图就描述了一个多个数 ...

  4. [转] 重定向 CORS 跨域请求

    非简单请求不可重定向,包括第一个preflight请求和第二个真正的请求都不行. 简单请求可以重定向任意多次,但如需兼容多数浏览器,只可进行一次重定向. 中间服务器应当同样配置相关 CORS 响应头. ...

  5. python学习--Python之import与from...import的区别与用法

    Python编码第一步是导入模块,有时候用import ***有时候用from...import,它们有什么区别呢,请看实例A/B: A: 1.当模块test.py中没有类,只有方法add,此方法实现 ...

  6. Oracle PL/SQL 语言（Procedural Language/SQL）

    Oracle PL/SQL 语言(Procedural Language/SQL)是结合了结构化查询与 Oracle 自身过程控制为一体的强大语言,PL/SQL 不但支持更多的数据类型,拥有自身的变量 ...

  7. curl 请求

    一.Linux curl用法举例: . linux curl抓取网页: 抓取百度: curl http://www.baidu.com curl http://www.baidu.com 如发现乱码, ...

  8. 【bzoj3782】上学路线 dp+容斥原理+Lucas定理+中国剩余定理

    题目描述 小C所在的城市的道路构成了一个方形网格,它的西南角为(0,0),东北角为(N,M).小C家住在西南角,学校在东北角.现在有T个路口进行施工,小C不能通过这些路口.小C喜欢走最短的路径到达目的 ...

  9. Codeforces 903F Clear the Matrix

    题目大意 考虑一个 $4$ 行 $n$ ($4\le n\le 1000$)列的矩阵 $f$,$f$ 中的元素为 * 或 . . 对 $f$ 进行若干次如下变换: 将一个 $k\times k$($1 ...

  10. 两种KMP题+KMP模版整理

    最近稍微看了下KMP,不是很懂他们大神的A题姿势,但是模版总该还是要去学的. 其中next数组的求法有两处区别. 第一种:求主串中模式串的个数.HDU2087 剪花布条和HDU4847 Wow! Su ...