Positioning(定位)
Positioning(定位)
定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么。
元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作
方式,这取决于定位方法.
四种定位方式
- Static 定位
HTML元素的默认值,即没有定位,元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响。
- Fixed(固定) 定位
固定定位相对于浏览器可视窗口进行定位。固定定位后自动变成行块元素;固定定位元素可以成为其后代绝对定位元素的
定位参照物;固定定位的元素的位置不受浏览器滚动条的影响。
- Relative(相对) 定位
a. 相对定位的参照物是元素没有发生定位前本应该出现的位置。
b.元素相对定位后其原来位置仍要保留,其它元素不得占用。
使用情况
1.元素想偏移。
2.元素要做为其绝对定位后代元素的参照物时。
- Absolute(绝对定位) 定位
a.元素绝对定位后自动变成行块元素。
b.绝对定位元素的父元素,计算宽高时将忽略绝对定位的子元素。
c.绝对定位的元素往往要配合使用left /right/top/bottom进行位置设定。
d.绝对定位的参照物是:离他最近的且设置了position值为relative/fixed/absolute之一的先祖元素,
如果没有这样的先祖元素 为参照物,那么参照物就是html。
e.绝对定位的元素,高度宽度如果设为百分比,那么这个百分比是相对于其定位参照物的高度宽度,而非
其父元素.
f.元素绝对定位后,设置left/right/top/bottom如果为百分比那么百分比是相对于其参照物的宽高来
计算的,而非自身的宽度。
g.绝对定位的元素,会遮挡处于其后面的标准流元素的内容.
h.可以通过z-index属性来控制定位元素与浮动元素在z轴方向上的叠加顺序, 但不能控制标准文档流元素.
Positioning(定位)的更多相关文章
- CSS Positioning(定位)
Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧属性定位.然而 ...
- CSS:CSS Positioning(定位)
ylbtech-CSS:CSS Positioning(定位) 1.返回顶部 1. CSS Positioning(定位) position 属性指定了元素的定位类型. position 属性的四个值 ...
- CSS定位(postion)和移动(float)
5.定位和移动:Positioning(定位)CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧 ...
- CSS布局与定位——height百分比设置无效/背景色不显示
CSS布局与定位——height百分比设置无效/背景色不显示 html元素属性width和height的值有两种表达方式,一是固定像素如“100px”,一是百分比如“80%”, 使用百分比的好处是元素 ...
- css总结1:position定位:absolute/relative/fixed
1 [Positioning(定位)] Positioning作用:指定了元素的定位类型.position包括四个值:static,relative,fixed,absolute. css定位解析:元 ...
- 绝对定位( Absolute positioning )
绝对定位( Absolute positioning ) 之前在介绍定位体系的时候,已经简单的介绍了绝对定位和固定定位.一般情况下,这两种定位的元素, 在 3D 的可视化模型中,处于浮动元素的上方,或 ...
- python走起之第十五话
CSS Positioning(定位) 定位有时很棘手! 决定显示在前面的元素! 元素可以重叠! Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后 ...
- 标准化css属性顺序
前言 对于css文件而言,选择器的写法有它的讲究,如—— 1> 不要用ID选择器 2> 不要用通配符*选择器 3> 选择器的层级 ...... 对于属性值的写法也有他的讲究,如—— ...
- div+css的属性
div+css的属性 gCascading Style Sheet 层叠式样式表 ==> 层叠样式表 Internal Style Sheet 内部样式表 External Style Shee ...
随机推荐
- Android EditText属性
1.EditText输入的文字为密码形式的设置 (1)通过.xml里设置: 把该EditText设为:android:password="true" // 以”.”形式显示文本 ( ...
- Java API ——包装类
1.包装类的概述 · 将基本数据类型封装成对象的好处在于可以在对象中定义更多的功能方法操作该数据. · 常用的操作之一:用于基本数据类型与字符串之间的转换. · 基本类型和包装类的对应 为了对基本数据 ...
- python 简单示例说明os.walk和os.path.walk的不同
import os,os.path def func(arg,dirname,names): for filespath in names: print os.path.join(dirname,fi ...
- android下升级软件介绍
编译android: 生成:system.img,ramdisk.img,userdata.img映像文件. ramdisk.img是emulator的文件系统 system.img包括了主要的包.库 ...
- 【开源推荐】AllJoyn:打造全球物联网的通用开源框架
摘要:随着智能设备的发展,物联网逐渐进入了人们的生活.据预测,未来几乎一切东西(超过500亿台设备)都可以互联.高通公司发布了开源项目AllJoyn,这是一个能够使连接设备间进行互操作的通用软件框架和 ...
- Android开发之ListView-ArrayAdapter的使用
ArrayAdapter: ArrayAdapter<String>(Context context, int resource, int textViewResourceId, Stri ...
- HTML5学习(五)----SVG
参考教程地址:http://www.w3school.com.cn/html5/html_5_svg.asp HTML5 支持内联 SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalabl ...
- 对DataTable里数据进行排序
在日常开发过程中,有一个DataTable集合,里面有很多字段,现在要求针对某一列进行排序,如果该列为数字的话,进行ASC即可实现,但是该字段类型为string,此时排序就有点不正确了. 我也不多废话 ...
- UVa 201 Squares
题意: 给出这样一个图,求一共有多少个大小不同或位置不同的正方形. 分析: 这种题一看就有思路,最开始的想法就是枚举正方形的位置,需要二重循环,枚举边长一重循环,判断是否为正方形又需要一重循环,复杂度 ...
- CQOI2009中位数图
原来在vijos上做过,当时根本看不懂 现在看起来这么水…… x记录从b向左连续走比k大的有多少个 y记录从b向右连续走比k大的有多少个 最后根据乘法原理乘一下 不过要加上x[0]+y[0]+1 因为 ...