简明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 滤镜的介绍 ...
随机推荐
- 64bit Centos6.4编hadoop-2.5.1
64bit Centos6.4编hadoop-2.5.1 1.说明 a) 因为从apache下载下来的tar.gz包是用32 bit编译的,全部假设用Linux 64作为hadoop的 ...
- ajax——client访问webservice基本用法
学前aps.net当我学会了使用服务器端的访问webservice方法,然后实现一个样本:web server模拟网上购物,今天学习asp.net ajax的时候学习到了client直接訪问webse ...
- C语言学习笔记-顺序表
#include "stdafx.h" #include <stdio.h> #include <stdlib.h> #include "coni ...
- CreateMutex
C++ API CreateMutex 找出当前系统是否已经存在指定进程的实例.假设没有则创建一个相互排斥体.CreateMutex()函数可用来创建一个有名或无名的相互排斥量对象. HANDLE C ...
- DB2数据类型
DB2数据库的内置数据类型主要分成数值型(numeric).字符串型(character string).图形字符串(graphic string).二进制字符串型(binary string)或日期 ...
- android rawquery和query对照
Cursor cursor = db.rawQuery("select name from *** where id=? ", new String[]{"1" ...
- xfire集成spring构建webservice
前言:xfire.spring都是比较流行的技术,这里就不再赘述他们各自的优点:本文着重介绍xfire和spring的整合,不会做太深入的探究. 服务端 1. web.xml配置 spring配置部分 ...
- OCP-1Z0-051-题目解析-第7题
7. Which two statements are true regarding the USING and ON clauses in table joins? (Choose two.) A ...
- Linux下的C程序如何调用系统命令,并获取系统的输出信息到C程序中
直接贴代码: #include <stdio.h> #include <string.h> #include <errno.h> int main(int argc ...
- mcstructs-MircoCStructs用C语言实现的微型数据结构库
以C语言的方式,我将逐步实现以下算法: 我的Github地址为:https://github.com/tfa2012/mcstructs 1 线性链表 2 环形缓冲区 3 Hash表