[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 ...
随机推荐
- Codeigniter数据库操作
//查询: $query = $this->db_query("SELECT * FROM table"); ================================ ...
- java synchronized与volatile的区别
java线程同步有两个特性,一个是可见性,一个是有序性.在解释这两个概念之前,先说下两个重要的概念,主内存(main memory)和工作内存(working memory),线 程之间数据的交互不是 ...
- Mina学习之IoHandler
IoHandler处理事件在Filter Chain 之后进行.IoHandler包含处理以下几个事件的功能: 1. sessionCreated event: session创建事件,对于Tcp而言 ...
- ios开发所有的iCON 的大小
新浪微博: 16x16png,80x80png,120x120png qq开放平台: 16*16png 20k以内 512*512jpg或者png 200以内 微信开放平台: 28x28 png,10 ...
- JDBC——Sql Server
sun公司设计一套java语言操作不同的数据库提供的是接口,二具体的实现类是由各大数据库厂商实现的. private static final String driver= "com.mic ...
- Java反射_JDBC操作数据
</pre><p>使用反射 来操作 这里是练习反射的使用</p><p>链接数据库工具类</p><p><pre name= ...
- CFileDialog的使用方法简单介绍
CFileDialog文件选择对话框的使用:首先构造一个对象并提供对应的參数,构造函数原型例如以下: CFileDialog::CFileDialog( BOOL bOpenFileDialog, L ...
- 数据结构与算法/leetcode/lintcode题解
http://algorithm.yuanbin.me/zh-hans/index.html
- JDK1.5中线程池,定时器知识
package cn.it.pool; import java.util.concurrent.ExecutorService; import java.util.concurrent.Executo ...
- 常用JDBC连接字符串
1.MySQL Class.forName( " org.gjt.mm.mysql.Driver " ); Connection conn = DriverManager.getC ...