简明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. 完整详细的说明GCD列(一)dispatch_async;dispatch_sync;dispatch_async_f;dispatch_sync_f

    为什么要写这个系列,由于百度了一下.我们正在寻找一个非常比较片面的Blog.抄来抄去,写作是很粗糙. 所以,我想写这个系列,尝试记录官方网站GCD强大的全功能的表达.为了方便他们,也方便他人,假设有发 ...

  2. RHEL5 X86-64上安装Oracle 11gR2演示样例与总结

    进入Oracle DBA行业也有好几年了,可是说到安装Oracle的经验,我还真不是特别多,印象中刚開始每次安装都有点磕磕碰碰,随着接触Oracle的时间越来越长,各方面的原理.机制也都有一定的了解后 ...

  3. 自由软件之父、Google+设计者、Java之父、Linux之父、万维网之父、Vi编辑器之父、苹果Lisa电脑界面设计、微软首席软件架构师

    自由软件之父.Google+设计者.Java之父.Linux之父.万维网之父.Vi编辑器之父.苹果Lisa电脑界面设计.微软首席软件架构师 理查德·斯托曼(Richard Stallman) 理查德· ...

  4. C语言库函数大全及应用实例九

    原文:C语言库函数大全及应用实例九                                                [编程资料]C语言库函数大全及应用实例九 函数名: mktemp 功 ...

  5. 【强烈强烈推荐】《ORACLE PL/SQL编程详解》全原创(共八篇)--系列文章导航

    原文:[强烈强烈推荐]<ORACLE PL/SQL编程详解>全原创(共八篇)--系列文章导航 <ORACLE PL/SQL编程详解> 系列文章目录导航 ——通过知识共享树立个人 ...

  6. 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 ...

  7. Mac OSX操作系统安装和配置Zend Server 6教程(3)

    Zend Server安装好以后,在php.ini文件中,没有默认时区.就是导致很多警告信息出现的根本. 接下来,我们看看如果修改这个文件. 首先,进入php.ini文件.此文件在目录zend/etc ...

  8. 基于EF+MVC+Bootstrap的通用后台管理系统及架构

    分享基于EF+MVC+Bootstrap的通用后台管理系统及架构 基于EF+MVC+Bootstrap构建通用后台管理系统,集成轻量级的缓存模块.日志模块.上传缩略图模块.通用配置及服务调用, 提供了 ...

  9. SuspendLayout()了解方法

     SuspendLayout()暂时挂起的布局逻辑控制(msdn),它ResumeLayout()在会同.我的理解是,使用SuspendLayout()让整个窗体站,等到所有的东西都设置齐全,然后Re ...

  10. ps入门教程:裁剪工具、修复画笔工具、图章工具的使用

    本节课程主要内容:学习裁剪工具.污点修复画笔工具.修复画笔工具.修补工具.套索工具.红眼工具.仿制图章工具和图案图 章工具的应用.----------------------------------- ...