12.8 定位属性

定位方式 position

1.static:表示默认值

2.absolute:表示采用绝对定位,

3.fixed:表示当页面滚动时,元素不跟着滚动

4.relative:表示采用相对定位,对象不可以层叠

一:绝对定位

position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素)。如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含块(body)

绝对定位与文档流无关,所以它们可以覆盖页面上其他的元素,可以通过z-index属性来控制这些层的对方顺序。

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

二:相对定位

position: relative;相对定位:相对定位是相对于元素在文档中的初始位置

注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

注意:position:absolute,float会隐式地改变display的类型(display:none除外)。即是当元素设置position:absolute、float:left、float:right中任意一个时,都会让元素以display:inline-block的方式显示(特点是:可以设置长宽,默认宽度不占满父元素)。这时,即使故意设置display:inline; display:block都是无效的。

但是float在IE6下的双边距bug就是用display:inline; 来解决的。
position:relative不会隐式改变display的类型。

时间: 2025-01-14 02:56:36

12.8 定位属性的相关文章

HTML的定位属性

position    用于定义一个元素是否absolute(绝对),relative(相对),static(静态),或者fixed(固定) top层距离顶点纵坐标的距离 left层距离顶点横坐标的距离 width层的宽度,可以用一个长度或“auto”值来指定其宽度,不允许使用负值 height层的高度,可以用一个长度或“auto”值来指定高度,不允许使用负值 z-index决定层的先后顺序和覆盖关系,值高的元素会覆盖比较低的元素 display是一个显示属性,设定block值是以块显示,在元素

Css中Position定位属性与层级关系

今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Css中Position定位属性与层级关系</title> 6 <style type="text/css"> 7 #W{ 8

定位属性left,right,top,bottom

1.官方解释 left: 设置定位元素左外边距边界与其包含块左边界之间的偏移.(该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移,下面也差不多..) right: 设置定位元素右外边距边界与其包含块右边界之间的偏移. top: 设置定位元素的上外边距边界与其包含块上边界之间的偏移. bottom: 设置定位元素下外边距边界与其包含块下边界之间的偏移. 2.个人理解 left等定位属性,要使用时,它得(dei)是已定位的元素.(absolute,relative,fixed) eg:im

产品定位四十八招(12)定位盈利专家吴玉龙

第四十招:基于"专用"定位策略<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /> 广告语"就像刚刚步出美发厅"定位"美发厅的选择"牌是美发厅专用的一种洗发香波. 第四十一招:"一次性使用"定位策略 1987年,柯达公司推出一次性相机获得了巨大的成功.1993年,仅在美国就销售了930万个一次性相

深入理解css中的定位属性:position

深入理解css中的定位属性:position 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute. 第一部分:static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到top,bottom,left,right的影响. 如html代码如下: <div class=&qu

CSS定位属性之间的相互作用

0. 目录 目录 引言 正文 1 DISPLAY NONE 2 POSITION ABSOLUTE OR FIXED Float DISPLAY 3 FLOAT LEFT OR RIGHT DISPLAY 4 POSITION STATIC 偏移值 声明 1. 引言 原文:bitsofcode的HOW POSITIONING CSS PROPERTIES INTERACT 译者:爱前端,乐分享的FedFun,前端痴王海庆的博客. 译言:来看下CSS标布局情况下,定位相关属性之间的相互作用,意译为

css10定位属性

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>定位属性</title> <style type="text/css"> /* position 01.relative:相对定位,相对于自身原来的位置 02.absolute:绝对定位,相当于父级 03.fixed : 固定

css中的定位属性position

同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来实现的一些特效经常会用到定位属性,比如鼠标滑过显示被隐藏的盒子, banner的切换,还有之前写的jquery实现京东商品分类导航的类似这样的布局也是要结合定位属性来实现,但是上一次着重只写了jquery. 那么这次我想将定位属性的运用拿来说一下. 定位属性position常用的取值:relative/absolute/fixed;一般配

CSS(八):定位属性

一.position属性 1.relative(相对定位) 相对它原来的位置,通过指定偏移,到达新的位置. 扔在标准流中,它对父级盒子和相邻的盒子都没有任何影响. 看下面的例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev