文档章节

position定位

_
 _好久不见
发布于 2015/11/30 17:54
字数 309
阅读 46
收藏 1

position定位有四种:

static--静态定位

relative--相对定位

absolute--绝对定位

fixed--固定定位


fixed和absolute的相同点:

一、完全脱离标准文档流。

二、未设置偏移量时,都定位在父元素的左上角。(偏移量--元素设置定位【绝对或相对】后就具有偏移属性和堆叠属性【z-index】)。


fixed和absolute的不同点:

一、设置偏移量时,偏移参照基准不同

absolute:

1.无已定位祖先元素,以<html>为基准偏移,而不是以<body>为基准偏移。

2.有已定位祖先元素,以距其最近的,已经定位的祖先元素为基准偏移。

fixed:

1.无论是否有已定位的祖先元素,都以浏览器的可视窗口为基准偏移。

二、未设置偏移量时

fixed:

1.有定位的祖先元素:以祖先元素为基准定位。

2.以浏览器窗口为基准定位。


当元素设置绝对定位却没有设置宽度时,元素的宽度根据内容进行调节。


相对定位:

1.相对于自身原有位置进行偏移。

2.处于标准文档流中。

3.拥有偏移属性和z-index属性。

© 著作权归作者所有

共有 人打赏支持
_
粉丝 9
博文 24
码字总数 17310
作品 0
西安
07/24 CSS中position总结

我们常常使postion用于层的定位,有时一个布局中有几个小对象,不易用css padding margin进行定位,这个时候我们就可以使用position的absolute、relative(绝对定位、相对定位)来轻松搞定。...

Winnie007
2016/07/27
12
0
CSS2样式表(属性·定位)

1、position 语法: position : static | absolute | fixed | relative 取值: static : 默认值。无特殊定位,对象遵循HTML定位规则 absolute : 将对象从文档流中拖出,使用 left , ri...

晨曦之光
2012/03/09
0
0
解决td标签上的position:relative属性在各浏览器中的兼容性问题

在css中的position属性规定了页面元素的定位类型,它有以下几个值: absolute:绝对定位,相对于static以外的第一个父元素进行定位; fixed:生成绝对定位的元素,相对于浏览器窗口进行定位;...

挨踢旅行者
2014/12/05
0
0
一步一图剖析CSS中的position定位

在CSS布局上float和position是永远说不完的道不尽的话题,它们的应用五花八门,组合技巧千奇百怪.通常如果你不是一个很熟练的Csser,那么你对与position肯定还是一知半解,比如说我自己... posit...

顽Shi
2014/03/21
0
5
Learn CSS Positioning in Ten Steps

使用float和clear可以方面的实现多列,并且div高度不用自己定义,会随着内容自动变化。 1. position:static 所有元素的默认定位都是:position:static,这意味着元素没有被定位,而且在文档中...

晨曦之光
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Bash重定向详解

Bash重定向详解 Bash的重定向指的是将命令的输入和输出导向不同地方,而不是默认的标准输入、标准输出和标准错误。Bash的重定向实际上是对标准输入、标准输出和标准错误的重置,进而将所需输...

小陶小陶
今天
3
0
EventBus原理深度解析

一、问题描述 在工作中,经常会遇见使用异步的方式来发送事件,或者触发另外一个动作:经常用到的框架是MQ(分布式方式通知)。如果是同一个jvm里面通知的话,就可以使用EventBus。由于Event...

yangjianzhou
今天
6
0
OpenCV图像处理实例:libuv+cvui显示摄像头视频

#include <iostream>#include <opencv2/opencv.hpp>#define CVUI_IMPLEMENTATION#include <cvui.h>extern "C"{#include <uv.h>}using namespace std;#define WINDOW_NAM......

IOTService
今天
3
0
openJDK之JDK9的String

1.openJDK8的String 先来看下openJDK8的String的底层,如下图1.1所示: 图1.1 底层上使用的是char[],即char数组 每个char占16个bit,Character.SIZE的值是16。 2.openJDK9中的String 图2.1...

克虏伯
今天
3
0
UEFI 模式下如何安装 Ubuntu 16.04

作者:知乎用户 链接:https://www.zhihu.com/question/52092661/answer/259583475 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 针对UEFI模式下安装U...

寻知者
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部