浅谈 css 之 position用法
在 css中, position 属性有四个值可用: static(默认值)、absolute、relative、fixed。
relative:相对定位(相对于自身进行在常规流中的位置进行定位,保留自身原始的位置)
absolute:
1、相对于自身的包含块定位;
2、寻找包含块的规则:从自身网上寻找祖先元素,寻找到的第一个position为非static修饰的祖先元 素的内边距边界 就是当前绝对定位元素的包含块;如果没有的话,则相对于 html进行定位;
3、完全脱离文档流;
4、display的取值类似于inline-block;
5、不缩短行框
fixed:
完全脱离文档流,和 absolute 的唯一的区别就在于:absolute元素是根据最近的定位上下文确定位置,而fixed永远根据浏览器确定位置。即使窗口是滚动的它也不会移动
说到 position,就要再说一下 [Z-index] (垂直定位)
Z-index 默认值为0;这种情况下,后者会覆盖前者,需要改变元素之间层级关系的话,就要通过改变 Z-index 值来实现了,Z-index值越大优先级就越高。
浅谈 css 之 position用法的更多相关文章
- 转:浅谈CSS在前端优化中一些值得注意的关键点
前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...
- css 之position用法详解
css 之position用法详解: http://www.jb51.net/web/77495.html
- [浅谈CSS核心概念] CSS布局模型:float和position
1.流动模型 HTML元素在默认情况下都是按照"流动模型"进行布局的,网上也有人称之为"普通流"."文档流"之类的.这种布局模式的特点在于: ...
- 浅谈CSS模块化
为什么要CSS模块化? 你是否为class命名而感到苦恼? 你是否有怕跟别人使用同样class名而感到担忧? 你是否因层级结构不清晰而感到烦躁? 你是否因代码难以复用而感到不爽? 你是否因为commo ...
- 浅谈css中的position
什么是position,根据css 2.1中的描述,position和float的值决定了浏览器要采用那种定位算法来计算元素盒子的具体位置.先避开float不谈,本文主要介绍position属性的不同 ...
- 浅谈css中的position属性
我觉得吧,css如果不考虑浏览器的兼容问题的话,最让人头疼的应该就是position了,反正我是这么觉得的,为了能基本上搞清楚position的几种情况,我找了一些资料,做了一个小实验,下面是实验的过 ...
- 浅谈css常用伪类用法
着重写一下after和before的用法: css样式搞定:标签元素+伪类after a.'class名':after{//我的样式名称是这个,可以写成你自己的样式名称 content: '已打包'; ...
- 浅谈css中的盒模型(框模型)
css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...
- 浅谈CSS和JQuery实现鼠标悬浮图片放大效果
对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...
随机推荐
- SIP MGCP和H323的区别
在Windows中内置的NetMeeting就是典型的H.323协议客户端,而比较常见的SIP系统是微软开发的MSN Messenger系统.首先,由用户A向SIP服务器发出呼叫请求,请求的信息包含自 ...
- 【转】在程序中设置android:gravity 和 android:layout_Gravity属性
在进行UI布局的时候,可能经常会用到 android:gravity 和 android:layout_Gravity 这两个属性. 关于这两个属性的区别,网上已经有很多人进行了说明,这边再简单说一 ...
- Design and Implementation of Global Path Planning System for Unmanned Surface Vehicle among Multiple Task Points
Design and Implementation of Global Path Planning System for Unmanned Surface Vehicle among Multiple ...
- multi-view datasets
http://rll.berkeley.edu/2014_ICRA_dataset/ http://rgbd-dataset.cs.washington.edu/dataset/
- 1.Spring Cloud初相识--------简单项目搭建
开发工具:STS 代码下载链接:GitHub管理项目 前言: Springcloud 算是当前比较火的技术,一套微服务架构的技术. 我个人对微服务的理解为: 服务可以代表service,微服务就是小的 ...
- lambda表达式的使用
lambda表达式和可遍历的datatable结合使用,把表中某一列中的数据转成字符串,用“|”隔开,代码如下: obj = tableName.AsEnumerable();if(tableName ...
- EAIntroView–高度可定制的iOS应用欢迎页通用解决方案
简介 高度可定制的应用欢迎页通用解决方案,可高度定制,不要仅限于现有的demo. 项目主页: EAIntroView 最新示例: 点击下载 入门 安装 安装后,引入” EAIntroView.h”并设 ...
- HDU2837 Calculation(扩展欧拉定理)
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...
- Java分享笔记:Map集合(接口)的基本方法程序演示
package pack02; import java.util.*; public class MapDemo { public static void main(String[] args) { ...
- mac同时安装jdk7和jdk8
下载地址:http://www.oracle.com/technetwork/java/javase/downloads/java-archive-downloads-javase7-521261.h ...