文档章节

position定位

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

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 ⋅ 0

CSS2样式表(属性·定位)

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

晨曦之光 ⋅ 2012/03/09 ⋅ 0

解决td标签上的position:relative属性在各浏览器中的兼容性问题

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

挨踢旅行者 ⋅ 2014/12/05 ⋅ 0

HTML CSS决定定位、滤镜

1.position:relative;相对对位 不影响元素本身的特性; 不使元素脱离文档流; 如果没有定位偏移量,对元素本身没有任何影响; 定位元素位置控制:top/right/bottom/left; IE6下父级的overf...

ShuenWang ⋅ 2017/03/28 ⋅ 0

一步一图剖析CSS中的position定位

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

顽Shi ⋅ 2014/03/21 ⋅ 5

css布局的相对与绝对定位

【position:absolute】 意思是:他的意思是绝对定位,他默认参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级的左上角,在没...

一颗星星变了心 ⋅ 2014/07/16 ⋅ 0

Learn CSS Positioning in Ten Steps

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

晨曦之光 ⋅ 2012/03/09 ⋅ 0

CSS中的position定位

position的属性值:static,absolute,relative,fixed. 1 static:position的默认属性,元素出现在正常的流中(忽略top,bottom,left,right,z-index声明)。通常设置position:static;的情况...

核桃白果 ⋅ 2014/03/22 ⋅ 0

CSS之Position详解

CSS之Position详解 CSS的很多其他属性大多容易理解,比如字体,文本,背景等。有些CSS书籍也会对 这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑。...

roockee ⋅ 2011/11/28 ⋅ 0

对CSS中的Position、Float属性的一些探讨

Position属性: 因为Position属性能够很好的体现HTML普通流这个特征。重点在于应用了不同的position值之后是否有脱离普通流和改变Display属性这两点。Position的属性值共有四个static、relat...

HalaMadrid ⋅ 2013/12/19 ⋅ 2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

用ZBLOG2.3博客写读书笔记网站能创造今日头条的辉煌吗?

最近两年,著名的自媒体网站今日头条可以说是火得一塌糊涂,虽然从目前来看也遇到了一点瓶颈,毕竟发展到了一定的规模,继续增长就更加难了,但如今的今日头条规模和流量已经非常大了。 我们...

原创小博客 ⋅ 32分钟前 ⋅ 0

MyBatis四大核心概念

本文讲解 MyBatis 四大核心概念(SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession、Mapper)。 MyBatis 作为互联网数据库映射工具界的“上古神器”,训有四大“神兽”,谓之:Sql...

waylau ⋅ 52分钟前 ⋅ 0

以太坊java开发包web3j简介

web3j(org.web3j)是Java版本的以太坊JSON RPC接口协议封装实现,如果需要将你的Java应用或安卓应用接入以太坊,或者希望用java开发一个钱包应用,那么用web3j就对了。 web3j的功能相当完整...

汇智网教程 ⋅ 今天 ⋅ 0

2个线程交替打印100以内的数字

重点提示: 线程的本质上只是一个壳子,真正的逻辑其实在“竞态条件”中。 举个例子,比如本题中的打印,那么在竞态条件中,我只需要一个方法即可; 假如我的需求是2个线程,一个+1,一个-1,...

Germmy ⋅ 今天 ⋅ 0

Springboot2 之 Spring Data Redis 实现消息队列——发布/订阅模式

一般来说,消息队列有两种场景,一种是发布者订阅者模式,一种是生产者消费者模式,这里利用redis消息“发布/订阅”来简单实现订阅者模式。 实现之前先过过 redis 发布订阅的一些基础概念和操...

Simonton ⋅ 今天 ⋅ 0

error:Could not find gradle

一.更新Android Studio后打开Project,报如下错误: Error: Could not find com.android.tools.build:gradle:2.2.1. Searched in the following locations: file:/D:/software/android/andro......

Yao--靠自己 ⋅ 昨天 ⋅ 0

Spring boot 项目打包及引入本地jar包

Spring Boot 项目打包以及引入本地Jar包 [TOC] 上篇文章提到 Maven 项目添加本地jar包的三种方式 ,本篇文章记录下在实际项目中的应用。 spring boot 打包方式 我们知道,传统应用可以将程序...

Os_yxguang ⋅ 昨天 ⋅ 0

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 昨天 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 昨天 ⋅ 0

eclipse酷炫大法之设置主题、皮肤

eclipse酷炫大法 目前两款不错的eclipse 1.系统设置 Window->Preferences->General->Appearance 2.Eclipse Marketplace下载【推荐】 Help->Eclipse Marketplace->搜索‘theme’进行安装 比如......

anlve ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部