简明CSS属性:定位
简明CSS属性:定位
第一话 定位 (Positioning)
关键词:position/z-index/top/bottom/right/left/clip
POSITION
- 该属性用来决定元素在页面上的位置。
- 用法:position:static(默认) | fixed | relative | absolute
static
- 遵守正常的文档流,不设置top,bottom,left,right值。
fixed
- 脱离正常的文档流,完全以浏览器窗口为参照物,不随鼠标的滚动而滚动。设定tblr值。
relative
相对于什么呢?是相对于该元素原本在文档流中的位置进行偏移。
也就是说,如果按文档流其本来应该在A处,设置了relative属性和left=10px;
则最后的位置为:A向右偏移10px。
- 当然这个元素的大小是不会改变的,因此会导致覆盖其他框。
应用:取相对定位值的元素通常作为取绝对定位值元素的父级容器。
absolute
- 为何称绝对呢?因为该元素要定位,就“绝对”要从里到外一层层容器找,找设定了position属性的元素(默认值static不算)。
- 也就是说,如果X被设定为绝对定位,定位时那么就要看X的父级Y是不是设定了position(一般是relative,如前文所述),没有?继续看Y的父级Z是不是设定了position...若是实在没有,就以html元素为基准定位咯。
- 元素脱离了正常文档流。因此会导致覆盖其他框。
应用:通过仅仅设置绝对定位属性,可以让元素定位到网页的任何部分。(当然以relative父级为基准也不错啦)
好。position几种值介绍完毕,上文中几次提到了覆盖一词。
那么如何决定元素重叠时谁上谁下呢?这里就引入了 z-index 属性。
Z-INDEX
- 通过给各个元素的z-index赋数值,重叠时进行比较,大的在上,小的在下。
- 用法:z-index:auto(默认) | 正/负值 |inherit
- 用处:仅能用于定位元素(即设定了position属性值)
auto
默认值,与其父级元素一致。
inherit
明确指出其必须从父级元素继承。
注意:若是index值相同,则依它们在文档流中出现的顺序决定层叠顺序,后来者上。
再就是top/bottom/left/right了。
top/bottom/left/right
- 设置偏移量。
- 用法:top: auto(默认) |值|百分比
- 用处:仅限用于定位元素。
值直接用px等表示。百分比是相对父级容器来讲的。
比如,定位元素X的left=50%, 假定其父级容器为Y(宽度为Y_width),则该偏移相当于,left=Y_width * 50%.
clip
- 用于裁剪元素(不限于图像哦)。
- 用法:clip : auto(默认) | rect ( top, right, bottom, left )
- 用处:仅用于属性position:absolute && overflow != visible的元素。
auto 不裁剪
rect里的四个参数是像素值。四个值都相对于图像左上方的(0,0)点。
比如图像原宽度为100px,rect里设定right=10px, 则裁剪过后,图像的宽度为10px。右边距左移了90px.
-----------------------------------------------------
定位 到此结束。
简明CSS属性:定位的更多相关文章
- day 40 文本属性 常用css属性 定位
一. 浮动的特性 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素由"字围"效果 4.收缩的效果 前提是标准文档流,margin的垂直方向会出现塌陷问题. 如果盒子居中: ...
- css区块定位之浮动与清除属性
float属性将所属标记的显示空间指定为一个浮动元素,并使其周围对象按一定的方式环绕它排列. float属性的作用就象图像和表格的align属性一样,但可以用到任何元素上. clear属性的作用是禁止 ...
- CSS属性:定位属性(图文详解)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. CSS的定位属性有三种,分别是绝对定位.相对定位.固定定位. posit ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- HTTP协议的请求与响应和CSS属性和定位
HTTP协议的请求与响应和CSS属性和定位 一.HTTP协议 1.1 HTTP定义 HTTP(Hypertext Transport Protocol),超文本传输协议. 一种详细规定了浏览器和web ...
- CSS 的定位方式和含义
CSS 的定位方式和含义 总结一下 CSS 的定位方式.CSS 的定位 position 是处理页面布局时非常重要的属性. CSS 中有 3 种基本的定位机制:普通流.浮动和绝对定位. 在没有指定的情 ...
- CSS元素定位6-10课
<精通CSS.DIV网页样式与布局>视频6-10课总结图: 元素定位 (1)float:left/right; 左浮动:脱离普通文档流向左浮动(即向左对齐):float属性必须应用在块级元 ...
- CSS中定位机制的想法
对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制. position:static | relative | absolute | ...
- CSS样式----图文详解(二):css属性
主要内容 CSS的单位 字体属性 文本属性 背景属性 列表属性 盒子模型 定位属性:position.float.overflow.z-index等 导航栏的制作 鼠标的属性cursor 滤镜的介绍 ...
随机推荐
- 完整详细的说明GCD列(一)dispatch_async;dispatch_sync;dispatch_async_f;dispatch_sync_f
为什么要写这个系列,由于百度了一下.我们正在寻找一个非常比较片面的Blog.抄来抄去,写作是很粗糙. 所以,我想写这个系列,尝试记录官方网站GCD强大的全功能的表达.为了方便他们,也方便他人,假设有发 ...
- RHEL5 X86-64上安装Oracle 11gR2演示样例与总结
进入Oracle DBA行业也有好几年了,可是说到安装Oracle的经验,我还真不是特别多,印象中刚開始每次安装都有点磕磕碰碰,随着接触Oracle的时间越来越长,各方面的原理.机制也都有一定的了解后 ...
- 自由软件之父、Google+设计者、Java之父、Linux之父、万维网之父、Vi编辑器之父、苹果Lisa电脑界面设计、微软首席软件架构师
自由软件之父.Google+设计者.Java之父.Linux之父.万维网之父.Vi编辑器之父.苹果Lisa电脑界面设计.微软首席软件架构师 理查德·斯托曼(Richard Stallman) 理查德· ...
- C语言库函数大全及应用实例九
原文:C语言库函数大全及应用实例九 [编程资料]C语言库函数大全及应用实例九 函数名: mktemp 功 ...
- 【强烈强烈推荐】《ORACLE PL/SQL编程详解》全原创(共八篇)--系列文章导航
原文:[强烈强烈推荐]<ORACLE PL/SQL编程详解>全原创(共八篇)--系列文章导航 <ORACLE PL/SQL编程详解> 系列文章目录导航 ——通过知识共享树立个人 ...
- leetcode 34 Search Insert Position
Given a sorted array and a target value, return the index if the target is found. If not, return the ...
- Mac OSX操作系统安装和配置Zend Server 6教程(3)
Zend Server安装好以后,在php.ini文件中,没有默认时区.就是导致很多警告信息出现的根本. 接下来,我们看看如果修改这个文件. 首先,进入php.ini文件.此文件在目录zend/etc ...
- 基于EF+MVC+Bootstrap的通用后台管理系统及架构
分享基于EF+MVC+Bootstrap的通用后台管理系统及架构 基于EF+MVC+Bootstrap构建通用后台管理系统,集成轻量级的缓存模块.日志模块.上传缩略图模块.通用配置及服务调用, 提供了 ...
- SuspendLayout()了解方法
SuspendLayout()暂时挂起的布局逻辑控制(msdn),它ResumeLayout()在会同.我的理解是,使用SuspendLayout()让整个窗体站,等到所有的东西都设置齐全,然后Re ...
- ps入门教程:裁剪工具、修复画笔工具、图章工具的使用
本节课程主要内容:学习裁剪工具.污点修复画笔工具.修复画笔工具.修补工具.套索工具.红眼工具.仿制图章工具和图案图 章工具的应用.----------------------------------- ...