Css Position定位(简易版本)
准备前的知识：
定位只对块级起作用。如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定位(简易版本)的更多相关文章
- 教你玩转CSS Position(定位)
CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...
- CSS Position 定位属性
本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...
- [CSS]position定位
CSS position 属性 通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式. position 属性值的含义: static 元素框正常生成.块级元 ...
- CSS position(定位)属性
关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...
- CSS| position定位和float浮动
对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...
- css - Position定位属性与层级关系
今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: <!DOCTYPE html> <html> <he ...
- CSS Position 定位属性介绍
1.介绍 1.1 说明 Position 属性:规定元素的定位类型.即元素脱离文档流的布局,在页面的任意位置显示. 1.2 主要的值 ①absolute :绝对定位:脱离文档流的布局,遗留下来的空间由 ...
- <转载>DIV+CSS position定位方法总结
如何学习DIV+CSS布局之position属性 如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用 absolute. 任 ...
- CSS Position定位过多是否会影响浏览器渲染速度
一直有个传说就是页面里的Position多了会影响浏览器渲染速度,今天做个测试看看结果如何. 检验的方法: 动态创建一定数量的div > 开始计算时间 > 导入css文件渲染 > o ...
随机推荐
- POJ：1961-Period（寻找字符串循环节）
Period Time Limit: 3000MS Memory Limit: 30000K Description For each prefix of a given string S with ...
- Objective-C中的一些特殊的数据类型
nil nil和C语言的NULL相同,在objc/objc.h中定义.nil表示一个Objctive-C对象,这个对象的指针指向空(没有东西就是空). Nil 首字母大写的Nil和nil有一点不一样 ...
- 我是怎么用FullCalendar记录我的2013年(辞职N次，面试2N次)的，它还兼容IE6
地址:wanshanshan.com中的”日程“功能 喜欢就点击我吧 流程介绍 ここはじまる! 前端采用javascriptMVC框架:控制器C,模型M,视图V ,控制器控制着视图和模型之间的联系和 ...
- Selenium WebDriver-actionchain模拟键盘操作
#encoding=utf-8 import unittest import time import chardet from selenium import webdriver from selen ...
- XeLaTeX插入GB/T 7714-2005规范的参考文献方法
GB/T 7714-2005 biblatex 在使用XeLaTeX的过程中,会遇到参考文献需要按照GB/T 7714-2005规范的情况.此时需要使用biblatex宏包,并且指定包的参数为 ...
- 算法理论——Linear SVM
问题引入 下面的三个超平面都起到分类的效果,哪个最好? 答案显然是第三个.为什么? 直觉上,如果现在我们有个测试点,非常靠近右下角的那个红叉叉,也就是说这个点的特征与那个红叉叉非常接近,这时候,我们希 ...
- 如何正确遍历删除List中的元素
遍历删除List中的元素有很多种方法,当运用不当的时候就会产生问题.下面主要看看以下几种遍历删除List中元素的形式: 1.通过增强的for循环删除符合条件的多个元素 2.通过增强的for循环删除符合 ...
- JQUERY杂技
JQUERY小技巧 this.value jsobject.val() #aaa:eq(2) 选择第三个id为aaa的元素 $("input")只选择input标签.如:<i ...
- Welcome-to-Swift-23访问控制(Access Control)
访问控制可以限定你在源文件或模块中访问代码的级别,也就是说可以控制哪些代码你可以访问,哪些代码你不能访问.这个特性可以让我们隐藏功能实现的一些细节,并且可以明确的指定我们提供给其他人的接口中哪些部分是 ...
- Python之实时调度任务
过了年就开始面临毕业了,毕业季是幸福的,但也是紧迫的.2月已过就开始着手策划毕业论文了,一直到现在,论文基本完成了,感觉过去的一个半月的时间,对自己过去2年在实验室所学又温习了一遍.书到用时方恨少,在 ...