简明CSS属性:定位

第一话 定位 (Positioning)

  关键词:position/z-index/top/bottom/right/left/clip

POSITION

  • 该属性用来决定元素在页面上的位置。
  • 用法:position:static(默认) | fixed | relative | absolute

static

  • 遵守正常的文档流,不设置top,bottom,left,right值。

fixed

  • 脱离正常的文档流,完全以浏览器窗口为参照物,不随鼠标的滚动而滚动。设定tblr值。

relative

  1. 相对于什么呢?是相对于该元素原本在文档流中的位置进行偏移。

    也就是说,如果按文档流其本来应该在A处,设置了relative属性和left=10px;

    则最后的位置为:A向偏移10px。

  2. 当然这个元素的大小是不会改变的,因此会导致覆盖其他框。

  应用:取相对定位值的元素通常作为绝对定位值元素的父级容器。

absolute

  1. 为何称绝对呢?因为该元素要定位,就“绝对”要从里到外一层层容器找,找设定了position属性的元素(默认值static不算)。
  2. 也就是说,如果X被设定为绝对定位,定位时那么就要看X的父级Y是不是设定了position(一般是relative,如前文所述),没有?继续看Y的父级Z是不是设定了position...若是实在没有,就以html元素为基准定位咯。
  3. 元素脱离了正常文档流。因此会导致覆盖其他框。

  应用:通过仅仅设置绝对定位属性,可以让元素定位到网页的任何部分。(当然以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 定位

简明CSS属性:定位的更多相关文章

  1. day 40 文本属性 常用css属性 定位

    一. 浮动的特性 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素由"字围"效果 4.收缩的效果 前提是标准文档流,margin的垂直方向会出现塌陷问题. 如果盒子居中: ...

  2. css区块定位之浮动与清除属性

    float属性将所属标记的显示空间指定为一个浮动元素,并使其周围对象按一定的方式环绕它排列. float属性的作用就象图像和表格的align属性一样,但可以用到任何元素上. clear属性的作用是禁止 ...

  3. CSS属性:定位属性(图文详解)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. CSS的定位属性有三种,分别是绝对定位.相对定位.固定定位. posit ...

  4. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  5. HTTP协议的请求与响应和CSS属性和定位

    HTTP协议的请求与响应和CSS属性和定位 一.HTTP协议 1.1 HTTP定义 HTTP(Hypertext Transport Protocol),超文本传输协议. 一种详细规定了浏览器和web ...

  6. CSS 的定位方式和含义

    CSS 的定位方式和含义 总结一下 CSS 的定位方式.CSS 的定位 position 是处理页面布局时非常重要的属性. CSS 中有 3 种基本的定位机制:普通流.浮动和绝对定位. 在没有指定的情 ...

  7. CSS元素定位6-10课

    <精通CSS.DIV网页样式与布局>视频6-10课总结图: 元素定位 (1)float:left/right; 左浮动:脱离普通文档流向左浮动(即向左对齐):float属性必须应用在块级元 ...

  8. CSS中定位机制的想法

    对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制. position:static | relative | absolute | ...

  9. CSS样式----图文详解(二):css属性

    主要内容 CSS的单位 字体属性 文本属性 背景属性 列表属性 盒子模型 定位属性:position.float.overflow.z-index等 导航栏的制作 鼠标的属性cursor 滤镜的介绍 ...

随机推荐

  1. 64bit Centos6.4编hadoop-2.5.1

    64bit Centos6.4编hadoop-2.5.1   1.说明 a)       因为从apache下载下来的tar.gz包是用32 bit编译的,全部假设用Linux 64作为hadoop的 ...

  2. ajax——client访问webservice基本用法

    学前aps.net当我学会了使用服务器端的访问webservice方法,然后实现一个样本:web server模拟网上购物,今天学习asp.net ajax的时候学习到了client直接訪问webse ...

  3. C语言学习笔记-顺序表

    #include "stdafx.h" #include <stdio.h> #include <stdlib.h> #include "coni ...

  4. CreateMutex

    C++ API CreateMutex 找出当前系统是否已经存在指定进程的实例.假设没有则创建一个相互排斥体.CreateMutex()函数可用来创建一个有名或无名的相互排斥量对象. HANDLE C ...

  5. DB2数据类型

    DB2数据库的内置数据类型主要分成数值型(numeric).字符串型(character string).图形字符串(graphic string).二进制字符串型(binary string)或日期 ...

  6. android rawquery和query对照

    Cursor cursor = db.rawQuery("select name from *** where id=? ", new String[]{"1" ...

  7. xfire集成spring构建webservice

    前言:xfire.spring都是比较流行的技术,这里就不再赘述他们各自的优点:本文着重介绍xfire和spring的整合,不会做太深入的探究. 服务端 1. web.xml配置 spring配置部分 ...

  8. OCP-1Z0-051-题目解析-第7题

    7. Which two  statements are true regarding the USING and ON clauses in table joins? (Choose two.) A ...

  9. Linux下的C程序如何调用系统命令,并获取系统的输出信息到C程序中

    直接贴代码: #include <stdio.h> #include <string.h> #include <errno.h> int main(int argc ...

  10. mcstructs-MircoCStructs用C语言实现的微型数据结构库

    以C语言的方式,我将逐步实现以下算法: 我的Github地址为:https://github.com/tfa2012/mcstructs 1 线性链表 2 环形缓冲区 3 Hash表