精华内容
下载资源
问答
  • 主要介绍了CSS position属性和实例应用演示,absolute(绝对定位),relative(相对定位),relative与absolute的结合使用以及fixed(固定定位),需要的朋友可以参考下
  • 目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE浏览器,IE9、IE10还没测试过),以下是w3school对position五个值的解释,有需要的朋友可以参考下
  • CSS position 属性

    千次阅读 2016-11-14 16:08:51
    position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移。postion也是初学者容易搞不清楚状况的一个属性,本文将从最基础的知识讲起,谈谈关于...

    position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移。postion也是初学者容易搞不清楚状况的一个属性,本文将从最基础的知识讲起,谈谈关于positon属性的一些理论与应用。

    基础知识

    postion属性我们成为定位,它有4个不同类型的定位,这些类型会影响元素的生成方式,下面我们详细说明position属性。

    position四种类型

    (1)static

    static是position属性的默认值,默认情况下,块级元素和行内元素按照各自的特性进行显示

    (2)relative

    relative翻译成中文称相对定位,设置了这个属性后,元素会根据top,left,bottom,right进行偏移,关键点是它原本的空间仍然保留。我们看下面例子:

    <div class="relative">

    </div>

    <div></div>

    div { background: #0094ff; width: 250px; height: 100px; }

    .relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left:50px; }

    效果图

    relative效果

    在这个例子中,div.relative相对定位,并且left设置为20px,left设置为50px,其相对于父元素进行偏移,并且原本的空间也占据着,下面的元素并不会顶替上去。

    (3)absolute

    元素设置成absolute后会脱离文档流,并且不占有原本的空间,后面的元素会顶替上去,而且不论元素是行内元素还是块级元素,都会生成一个块级框,也就是例如行内元素span设置了absolute后就可以设置height和width属性了。看下面例子:

    <span class="absolute">

    </span>

    <div></div>

    div { background: #0094ff; width: 250px; height: 100px; }

    .absolute { background: #ff6a00; position: absolute; width: 200px; height: 100px; top: 20px; left:50px; }

    效果图

    absolute效果

    如图所示,span标签被设置成绝对定位,就可以设置height和width属性,而且不占有原本的空间,后面的div元素会顶替上去。

    (4)fixed

    fixed的表现方式类似于absolute,但是相比于absolute相对于不确定的父元素进行偏移,fixed就是相对于浏览器窗口进行偏移

    包含块

    在详解CSS float属性中我们提到包含块这个概念。对于position属性也有包含块这个属性,它要分几种情况来讨论:

    1.根元素的包含块,根元素一般是html元素,有些浏览器会使用body作为根元素,大多数浏览器,初始包含块是一个视窗大小的矩形

    2.非根元素的包含块,如果该元素的position是relative或static,它的包含块是最近的块级框,表的单元格或行内块的内容边界

    我们举例进行说明,

    <div>

    我是父级元素的内容

    <div class="relative">

    相对定位元素

    </div>

    </div>


    div { background: #0094ff; width: 250px; height: 100px; }

    .relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left:50px; }

    效果图

    包含块

    这是相对定位元素的包含块,为最近的块级框,表的单元格或行内块的内容边界,相对定位元素相对于其包含块进行偏移,我们可以简单理解为相对于其原来的位置进行偏移。

    3.非根元素的包含块,如果该元素的position是absolute,则包含块为最近的position不是static的祖先元素。

    简单来说,它的包含块会从父级元素一直向上查找,找到第一个position不是static的元素为止。

    偏移属性

    前面的例子中已经涉及到偏移属性,它指的是元素相对于其包含块的偏移,我们称其为偏移属性,分别是top,bottom,left,right,依次代表上下左右。他们的值可以是具体的数值,也可以是百分比。如果是百分比,top和bottom是相对于包含块高度的百分比,left和right是相对于宽度的百分比。它们也可以设置负值,即有可能将元素移动到包含块的外边。

    绝对定位

    接下来我们了解一下绝对定位的详细细节。

    基本的绝对定位

    一个元素被设置为绝对定位时,会脱离文档流,然后相对其包含块进行偏移。

    展开全文
  • 目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE浏览器,IE9、IE10还没测试过),以下是w3school对position五个值的解释,需要的朋友可以参考下
  • 关于CSS position属性值absolute,relative的解释.zip
  • cssposition属性

    万次阅读 2018-08-11 11:49:02
    Html css position属性  position属性把元素放置在一个静态的,相对的,绝对的,或则固定的位置中. 1,第一个属性absolute,绝对定位 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的...

    Html css position属性

      position属性把元素放置在一个静态的,相对的,绝对的,或则固定的位置中.

    1,第一个属性absolute,绝对定位

    生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>定位</title>
    	</head>
    	<style>
    	/*绝对定位*/
    
    	div.pos_abs{
    		position:absolute;
    		left:100px;
    		top:150px;
    		width:200px;
    		height:200px;
    		background-color:black;
    		color:white;
    		text-align:center;
    	}
    	div{
    		border:2px solid black;
    	}
    	</style>
    	<body>
    		<div class="pos_abs">
    			这是一个绝对定位的盒子
    		</div>
    		<div>
    			通过绝对定位,元素可以放置在页面上的任何位置,下面的黑色盒子距离页面左侧100px,距离页面顶部150px.
    		</div>
    	</body>
    </html>

    我们 可以改一下第二个div class="pos_abs"的width:500px和height:500px,会发现绝对定位盒子的位置始终不会改变,会在第二个div的内部.

    2,第二个属性fixed:固定定位元素,相对于浏览器窗口进行定位

    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>定位</title>
    	</head>
    	<style>
    	/*定位*/
    
    	div.pos_abs{
    
    		/*下面是一个基于static的绝对定位*/
    		/*position:absolute;*/
    
    		/*下面是一个基于浏览器窗口的固定定位*/
    		position:fixed;
    		left:100px;
    		top:150px;
    		width:200px;
    		height:200px;
    		background-color:black;
    		color:white;
    		text-align:center;
    	}
    	div{
    		border:2px solid black;
    		width:500px;
    		height:500px;
    	}
    	</style>
    	<body>
    		<div class="pos_abs">
    			这是一个固定定位的盒子
    		</div>
    		<div>
    			通过fixed固定定位,元素可以放置在页面上的任何位置,下面的黑色盒子距离浏览器窗口左侧100px,距离浏览器窗口顶部150px.当我们滚动页面时,黑盒子和浏览器窗口的相对位置不会发生任何变化.
    		</div>
    		<div>此盒子用来撑开页面高度</div>
    		<div>此盒子用来撑开页面高度</div>
    	</body>
    </html>

    用两个盒子撑开页面高度,当我们使页面向下滚动的时候,会发现fixed固定的黑盒子,始终以浏览器窗口为参照,固定在页面上.

    3,relative 生成相对定位的元素,相对于其正常位置进行定位。

     下面我只给css样式,代码不在重复写了

    div.pos_abs{
    
    		/*下面是一个基于static的绝对定位*/
    		/*position:absolute;*/
    
    		/*下面是一个基于浏览器窗口的绝对定位*/
    		/*position:fixed;
    		left:100px;
    		top:150px;*/
    
    		/*下面是一个相对定位*/
    		position:relative;
    		left:-20px;
    		top:-10px;
    		width:200px;
    		height:200px;
    		background-color:black;
    		color:white;
    		text-align:center;
    	}

    在浏览器中打开可以看到,黑色盒子的一部分已经到了页面外部,盒子相对于它原来该有的位置进行位置的调整.

    4,另外还有两个属性static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

    inherit:规定应该从父元素继承 position 属性的值(static和inherit不是很常用)

     

    5,一个常用的组合"子绝父相",子盒子采用绝对定位(absolute),父盒子用相对定位(relative),将子盒跟父盒子的相对位置绑定

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>定位</title>
    	</head>
    	<style>
    	/*定位*/
    
    	div.pos_relative{
    
    		/*下面是一个基于static的绝对定位*/
    		/*position:absolute;*/
    
    		/*下面是一个基于浏览器窗口的绝对定位*/
    		/*position:fixed;
    		left:100px;
    		top:150px;*/
    
    		/*下面是一个相对定位*/
    		position:relative;
    		left:20px;
    		top:10px;
    		width:500px;
    		height:500px;
    		background-color:black;
    		color:white;
    		text-align:center;
    	}
    	div.pos_abs{
    		position:absolute;
    		left:50px;
    		top:70px;
    		border:2px solid black;
    		width:200px;
    		height:200px;
    		background: white;
    		color:black;
    	}
    	div{
    		width:500;
    		height:500px;
    		border:2px solid black;
    	}
    	</style>
    	<body>
    		<div class="pos_relative">
    			这是一个定位的父盒子
    			<div class="pos_abs">
    			(子盒子)子盒子会跟着父盒子一起变动,通过子绝父相,将两盒子的相对位置绑定.
    			</div>
    		</div>
    		
    		<div>此盒子用来撑开页面高度</div>
    		<div>此盒子用来撑开页面高度</div>
    	</body>
    </html>

     

    展开全文
  • CSS position属性

    2015-06-02 18:49:02
    CSSposition属性用于表示元素的位置信息。 有三个取值:static, absolute, relative。如果元素没有显式配置position属性,则该元素默认的position 值为static。 1、static:这是表示该元素按照排列和嵌套的顺序和...

    CSS中position属性用于表示元素的位置信息。

    有三个取值:static, absolute, relative。如果元素没有显式配置position属性,则该元素默认的position 值为static。

    1、static:这是表示该元素按照排列和嵌套的顺序和规则应该在的位置,此时设置top,right,left, bottom属性是无效的;

    2、absolute:位置参考点是离其最近的配置了position属性值为非static的父节点元素,如果其所有父节点都没有显式配置position属性,则以浏览器窗口的位置为参考,此时设置top,right,left, bottom属性值有效;

    3、relative:位置参考点是其原有位置(该元素position配置为static的位置),此时设置top,right,left, bottom属性值有效;


    z-index属性用于指定三维坐标(x,y,z)中z坐标的值,该值默认是0,可以设置为正数,也可以设置为负数,值越大,表示在z轴方向越靠前。

    注意:该属性必须在元素配置了position属性值为relative/absolute的前提下才有效。

    展开全文
  • 关于Cssposition属性fixed失效 该元素的父元素用到了transform属性,导致position: fixed失效,去掉transform之后就I可以了

    关于Css中position属性fixed失效

    该元素的父元素用到了transform属性,导致position: fixed失效,去掉transform之后就I可以了

    展开全文
  • CSSposition属性值有哪些?

    千次阅读 2020-12-18 22:17:37
    CSSposition属性值有哪些? 1、position:relative;相对定位 1> 不影响元素本身特性(无论区块元素还是内联元素会保留其原本特性) 2> 不会使元素脱离文档流(元素原本位置会被保留,即改变位置也不会占用新...
  • 详解CSS position 属性

    千次阅读 2020-04-23 23:15:56
    文章目录一、什么是position?二、static 静态定位(默认)三、absolute 绝对定位3.1 absulote 嵌套用法 同一个父元素3.2 absulote 嵌套用法四、relative 相对定位4.1 relative里边的absolute五、fixed 固定定位5.1 会...
  • CSS3理解position属性

    千次阅读 2017-08-09 15:45:15
    一般情况下,页面是由页面流构成的。...块级元素从上向下排列(每个块级元素单独成行),而内联元素将从左向右排列,...position属性 :可以将元素从页面流中偏移或分离出来,然后设定其具体位置,从而实现更精确的定位
  • cssposition属性取值

    千次阅读 2017-04-01 22:22:05
    cssposition属性用于元素定位,其属性值有5个,分别是inherit 、static、relative、fixed、absolute ,下面是具体的分析: 1.inherit 规定该元素的position的属性值继承自父元素。也就是说该元素的position...
  • 嵌套DIV布局,会牵扯到CSSposition属性 如果内层DIV将position属性设置为absolute,并设置left,和top等属性,还需要考虑外层DIV的position属性设置。 absolute:absolute绝对定位,直接指定top、left、right、...
  • CSSposition属性介绍(新增sticky)

    千次阅读 2017-08-22 13:59:53
    position的含义是指定位类型,取值类型可以有:static、relative、absolute、fixed、inherit和sticky,这里sticky是CSS3新发布的一个属性。1、position: static static(没有定位)是position的默认值,元素处于正常...
  • 其中,CSS position 属性可以取5种值:position: absoluteposition: relativeposition: fixedposition: staticposition: inheritstatic 是 position 默认的属性值。任何应用了 position:static 的元素都处于常规文档...
  • 可能的值:absolute,fixed,relative,static,static,inherit。 值 描述 ...生成绝对定位的元素,相对于 static 定位以外的第...元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed
  • postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响。该属性共有5个值: position: absoluteposition: relativeposition: fixedposition:...inherit 值如同其他 css 属性的 inherit 值,即继承父元素的
  • 对于前端开发工程师来说,编写CSS是前端开发工作中必不可少的一个内容,在CSS中的position属性又是非常重要的一个方面。顾名思义,所谓position,即是对HTML元素定位方式的一种设置。它是CSS定位技术的基石,看似很...
  • 主要介绍了详解CSSposition属性介绍(新增sticky) 的相关资料,position的含义是指定位类型,取值类型可以有:static、relative、absolute、fixed、inherit和sticky,这里sticky是CSS3新发布的一个属性,感兴趣的小...
  • position属性是对于
  • css position属性取值

    2013-10-22 00:21:24
    position属性取值 static:默认值,没有定位,元素出现在正常流中; absolute:生成绝对定位的元素,相对于第一个position属性值非static的父元素定位;  元素的位置通过 "left", "top", "right" 以及 "bottom" ...
  • 在网页设计中,position属性的使用是非常重要的。有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难。 position属性共有四种不同的定位方法,分别是static、fixed、relative、absolute。最后将会介绍...
  • 下述有关css属性position属性值的描述,说法错误的是? 牛客网错题集 static:没有定位,元素出现在在正常的流中 fixed:生成绝对定位的元素,相对于父元素进行定位 relative:生成相对定位的元素,相对于元素...
  • 百思不得其解,后来发现CSS 这样定义: 复制代码代码如下: .nav { background:transparent url(images/y.gif) no-repeat scroll 0 0; height:42px; width:980px; font-size:12px; list-style:none; } .nav ul{ ...
  • position 属性的常用的5种取值

    千次阅读 2020-06-22 23:10:17
    说到 CSSposition 属性,大家都知道也都用过,但是要说它有几个取值以及这些值的不同,可能有部分同学会哑口无言,毕竟这不影响日常开发(手动狗头),身为一名有梦想的程序员,我们应该秉承刨根问底的钻研精神...
  • cssposition属性取值fixed固定底部

    千次阅读 2018-10-11 16:44:32
    cssposition属性取值fixed固定底部   一般的 position:fixed; 实现方法 以我的博客为例,在右下角 &lt;div id="top"&gt;...&lt;/div&gt; 这个 HTML 元素使用的 CSS 代码如下:   ...
  • CSS教程:position属性

    2020-12-09 20:01:01
    position属性可以让你让你随意控制一个特定元素在浏览器何处以及如何显示。比方说我们用position:fixed 让一个图片显示在浏览器的左上角.即使出现滚动条他依然可以在浏览器的左上角.posotion属性有4个取值.由于...
  • 在开发移动端app时,经常会碰到需要这样一种情况 —— 网站滚动到一定高度的时候,让一部分内容作为navbar,也就是置顶显示,我们一般会使用js监听scroll事件来实现,但是新增的css属性position:sticky可以简单实现 ...
  • 主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • POSITION属性用来决定元素在页面上的位置,其定位属性有多个,下面一一为大家介绍下,希望大家在使用过程中可以用到

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 161,830
精华内容 64,732
关键字:

cssposition属性