CSS:static/relative/absolute
static - default and this is the FLOW.
-------------------------------------------------------------------------------------------------------------------------
relative - postition determined by first STATIC element.
top、bottom、left、right
保持文档流,占空间——保留自己在z-index:0层的占位。通过设置top、right、bottom、left值相对本身的原始位置发生位移。postition:relative不会改变display类型。
在使用相对定位是,无论是否移动,元素仍然会占据原来的空间。因此,移动元素可以覆盖页面上的其他框。可以通过设置z-index属性来控制这些框的叠放次序。z-index值越高,框在栈中的位置就越高。
-------------------------------------------------------------------------------------------------------------------------
absolute - position determined by first NON-STATIC element.
top、bottom、left、right
脱离文档流,不占空间——不在z-index:0层保留占位符。通过设置top、right、bottom、left值相于距自己最近的非static祖先元素发生位移。(如果祖先元素全都没有设置,那就是相对body元素)position:absolute(和float)会隐性改变display类型为display:inline-block方式显示。
注:display:inline-block
inline-block 元素创建了一个行级的块容器,该元素内部(内容)被格式化成一个块元素,同时元素本身则被格式化成一个行内元素。
简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值, 使其既具有block的宽度高度特性又具有inline的同行特性。
relative & abusolute相同点:
两个参数都能改变对应元素在文档中的位置,并激活元素的top、right、bottom、left和z-index属性。
CSS:static/relative/absolute的更多相关文章
- css属性position: static|relative|absolute|fixed|sticky简单解析
目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...
- What is the difference between position: static,relative,absolute,fixed
What is the difference between static,relative, absolute,fixed we can refer to this link: expand
- CSS 相对/绝对(relative/absolute)定位系列(四)——张鑫旭
前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着 ...
- CSS 相对|绝对(relative/absolute)定位系列(一)
一.有话要说 以前写内容基本上都是:眼睛一亮——哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...
- CSS 相对/绝对(relative/absolute)定位与jQuery的控制显示隐藏
曾经写显示隐藏老是用jq方法控制: dom.show(); dom.hide(); 事实上这样还是有非常多缺陷的. 这是html结构: <div class="holi"&g ...
- 【前段开发】10步掌握CSS定位: position static relative absolute float
希望能帮到须要的人,转自:http://www.see-design.com.tw/i/css_position.html 1. position:static 元素的 position 屬性默認值為 ...
- CSS:布局的三个关键属性:float、position、display
最近在出差,就我一个在这里.客户要做几个页面,涉及到了页面的布局问题,没办法自己得做了.然后就遇到了一些问题.页面不论怎么都不能按照设想的布局. 以前也没有做过网页布局方面的工作.上网上找类似的例子, ...
- CSS中Position属性static、absolute、fixed、relative
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...
- CSS position relative absolute fixed
position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...
随机推荐
- Java程序员必备的6款最佳开发工具
工欲善其事,必先利其器.每一个Java程序员都有其惯用的工具组件.对于Java程序员,各种有用的软件和工具泛滥成灾.初级开发人员要么找不到合适的工具,要么在寻找过程中浪费了大量的时间.下面,我将为大家 ...
- 我的android学习经历27
前几天忙着学校的互联网+项目比赛,没有时间学习android和发一些东西,主要是这两天太累了,我是项目组长,好多东西去弄,今天已经交稿去进行初赛. 马上收拾收拾心情,继续我的andorid菜鸟之路 加 ...
- 简单封装JDBC
package com.sunshine.frimework.tool;import java.sql.Connection;import java.sql.DriverManager;import ...
- van Emda Boas
van Emda Boas维护了一个整数集合[0,Max)(无重复),其中Max必须等于2的正整数次幂.它支持以下操作:(1)插入一个数字;(2)删除一个数字:(3)询问某一个数字在不在这个集合中:( ...
- CodeForces 490C Hacking Cypher
Hacking Cypher Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Sub ...
- 回归——线性回归,Logistic回归,范数,最大似然,梯度,最小二乘……
写在前面:在本篇博客中,旨在对线性回归从新的角度考虑,然后引入解决线性回归中会用到的最大似然近似(Maximum Likelihood Appropriation-MLA) 求解模型中的参数,以及梯度 ...
- Using SYSTEM.MOUSE_ITEM In Oracle Forms
If the mouse is in an item, SYSTEM.MOUSE_ITEM represents the name of that item as a CHAR value.For e ...
- C# WPF – 利用“Attached Property” 把 RoutedEvent 接上 ICommand
本文说明怎样把 DoubleClick 连接至 ICommand.方法很多.推荐使用 Attach Property 方式,因为它能把任何 RoutedEvent 接上任何 ICommand. 之前写 ...
- CUBRID学习笔记 24 数据类型1
---恢复内容开始--- 一 数字类型 注意小数的四舍五入问题 1数字型 Type Bytes Mix Max Exact/approx. SHORTSMALLINT 2 -32,768 32,76 ...
- Codeforces Round #250 (Div. 2)A(英语学习)
链接:http://codeforces.com/contest/437/problem/A A. The Child and Homework time limit per test 1 secon ...