[CSS]position定位
通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。
position 属性值的含义:
- static
- 元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
- relative
- 元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
- absolute
- 元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
- fixed
- 元素框的表现类似于将 position 设置为 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,来自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定位(简易版本)
准备前的知识: 定位只对块级起作用.如div,p等元素是块级元素,如果是内联元素则可以先变成块级元素,display:block即可. 开始讲解: 定位共四种:static,fixed,relativ ...
- 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 ...
随机推荐
- How I Mathematician Wonder What You Are! - POJ 3130(求多边形的核)
题目大意:判断多多边形是否存在内核. 代码如下: #include<iostream> #include<string.h> #include<stdio.h> # ...
- Maven : 将Jar安装到本地仓库和Jar上传到私服 转
http://blog.csdn.net/we_shell/article/details/49819221 Jar的maven配置 <dependency><groupId> ...
- 第一个小项目(天气预报软件)——称"酷狗天气"
一.创建数据库和表 分析: 二.遍历全国省市县数据 分析: 三.显示天气信息 分析: 四.切换城市和手动更新天气 分析: 五.后台自动更新天气 分析:
- java树状结构之二叉树
参考:http://blog.csdn.net/zhangerqing/article/details/8822476 前面已经提到过树和二叉树的相关概念内容,下面主要来介绍下关于二叉树的创建,遍历, ...
- 写一段方便的SQL 循环查每一天的数据
declare @recd int,@i int,@a int,@count int,@day1 date,@day2 date,@days int set @day1='2014-8-24' set ...
- PrintWriter的print和write方法(转)
public void print(String s) {if (s == null) {s = "null";}write(s); } print只是先对s==null转换为 ...
- stackoverflow上关于iOS的票数最多(最常见)的15个问题
搞编程做项目的,没碰到bug.遇到问题,基本不可能.stackoverflow就是一个大型的开放的FAQ平台,你是问题制造者,也是答案提供者.本文列出至今stackoverflow上关于iOS的票数最 ...
- 看懂下面C++代码才说你理解了C++多态虚函数!
#include <iostream> using namespace std ; class Father { private : virtual void Say() //只有添加 ...
- linux find grep使用
在当前目录下所有文件中查找内容包含 string 的文件: find ./ -name "*" -exec grep "string" {} \; 注意:在最后 ...
- 后缀自动机(SAM)
*在学习后缀自动机之前需要熟练掌握WA自动机.RE自动机与TLE自动机* 什么是后缀自动机 后缀自动机 Suffix Automaton (SAM) 是一个用 O(n) 的复杂度构造,能够接受一个字符 ...