精华内容
下载资源
问答
  • position属性

    千次阅读 2018-09-27 23:28:32
    position定位有4个属性,分别是static,absolute,relative,fixed 1.static(默认) static属性为默认值,没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.relative...

    position定位有4个属性,分别是static,absolute,relative,fixed

    1.static(默认)

    static属性为默认值,没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明).

    2.relative(相对定位)

    此处的相对并不是相对于哪个父div或子div,相对只是相对于自身原本的位置发生变化。

    3.absolute(绝对定位)

    absolute定位是布局中最常用到的定位,其生成的位置是相对于带有position属性的父(父...)级来定位

    如果父级都没有position属性,则相对于document来定位;

    使用absolute定位后,定位元素是脱离文档流的,这时候父级会检测不到定位元素的宽高。inline元素使用absolute定位之后,可以对其设置宽高;

    元素是不可以同时使用绝对定位和浮动的

    4.fixed(固定定位--相对于浏览器窗口)

    生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定.

     

    也是脱离了文档流,与absolute一样,可以设置宽高,但是父级会检测不到定位元素的宽高,所以无法由子元素撑开

    元素是不可以同时使用fixed定位和浮动的。

     

    展开全文
  • Relative是position的一个属性,是相对定位,通过本篇文章给大家介绍Position属性之relative用法,对position属性relative相关知识感兴趣的朋友一起学习吧
  • CSS教程:position属性

    2020-12-09 20:01:01
    position属性可以让你让你随意控制一个特定元素在浏览器何处以及如何显示。比方说我们用position:fixed 让一个图片显示在浏览器的左上角.即使出现滚动条他依然可以在浏览器的左上角.posotion属性有4个取值.由于...
  • 本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态。这节课主要讲讲relative(相对)以及absolute(绝对)。 如何学习DIV+CSS...
  • 在网页设计中,position属性的使用是非常重要的。有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难。 position属性共有四种不同的定位方法,分别是static、fixed、relative、absolute。最后将会介绍...
  • 对于前端开发工程师来说,编写CSS是前端开发工作中必不可少的一个内容,在CSS中的position属性又是非常重要的一个方面。顾名思义,所谓position,即是对HTML元素定位方式的一种设置。它是CSS定位技术的基石,看似很...
  • 嵌套DIV布局,会牵扯到CSS的position属性 如果内层DIV将position属性设置为absolute,并设置left,和top等属性,还需要考虑外层DIV的position属性设置。 absolute:absolute绝对定位,直接指定top、left、right、...
  • 其中,CSS position 属性可以取5种值:position: absoluteposition: relativeposition: fixedposition: staticposition: inheritstatic 是 position 默认的属性值。任何应用了 position:static 的元素都处于常规文档...
  • 主要介绍了CSS position属性和实例应用演示,absolute(绝对定位),relative(相对定位),relative与absolute的结合使用以及fixed(固定定位),需要的朋友可以参考下
  • CSS 背景位置 background-position属性

    万次阅读 多人点赞 2018-02-17 20:52:35
    背景位置除了背景背景平铺外,CSS还提供了另一个强大的功能,即背景...通过 background-position属性,可以很轻松的控制背景图像在对象的背景区域中的起始显示位置。其语法格式为:background-position: xpos ypo...

    除了背景背景平铺外,CSS还提供了另一个强大的功能,即背景定位技术,能够精确控制背景在对象中的位置。

    默认情况下,背景图像都是从元素 padding 区域的左上角开始出现的,但设计师往往希望背景能够出现在任何位置。通过 background-position属性,可以很轻松的控制背景图像在对象的背景区域中的起始显示位置。其语法格式为:

    
    
    1. background-position: xpos ypos | x% y% | x y

    CSS1中,background-position属性需要 2 个参数值,第一个值用于横坐标,第二个值用于纵坐标,默认值为 0% 0%,即背景图像的左上角与对象背景区域的左上角对齐。如果只提供一个值,则用于 x 轴方向,y 轴方向使用默认值 center,即垂直居中。

    上述语法格式表明,背景图像有 3 种定位方式:

    1)xpos ypos:表示使用预定义关键字定位,水平方向可选关键字有 left | center | right,垂直方向可选关键字有 top | center | bottom。

    关键字定位,应用的是对齐规则,而不是坐标规则。xpos 为 left 表示图像的左边与对象的左边对齐,为 right 表示图像的右边和对象的右边对齐;ypos 为 top 表示图像的顶部和对象的顶部对齐,为 bottom 表示图像的底部和对象的底部对齐;xpos、ypos等于 center表示图像在水平和垂直方向的中心,和对象在水平和垂直方向的中心对齐,即。

    依然使用前面的背景图案 bg.gif,其尺寸为 100px * 100px,对象的尺寸为 200px * 200px,背景图像的位置使用预定义关键字定位。如:

    
    
    1. div {
    2. width: 200px;
    3. height: 200px;
    4. border: 1px dashed #ccc;
    5. background-repeat: no-repeat;
    6. background-position: center center;
    7. background-image: url(img/bg.gif);
    8. }

    上述定位,就表示背景图像的中心,与背景区域的中心对齐,即背景图像位于对象的中央位置。运行结果如图 4‑28 所示:

    背景图像关键字定位图4-28 背景图像关键字定位

    2)x% y%:表示使用百分比定位,是将图像本身(x%, y%)的那个点,与背景区域的(x%, y%)的那个点重合。最终得到背景图像起始位置坐标的计算公式为:

    x = (对象的宽度 - 图像的宽度) * x%;

    y = (对象的高度 - 图像的高度) * y%;

    还是上面的例子,改为百分比定位,要使背景图像居中,只需把背景图像的位置设置为50% 50% 即可。使用上面的公式,得到背景图像起始位置的坐标为:

    x:(200px - 100px) * 50%  = 100px * 50% = 50px

    y:(200px - 100px) * 50%  = 100px * 50% = 50px

    得到的结果与上例相同,限于篇幅,就不再截图了。当然,百分比的值也可以是负值,计算公式依然不变。还是上面的例子,把百分比改为 -50% -50%。此时,得到背景图像起始位置的坐标为:

    x:(200px - 100px) * (-50%) = 100px * (-50%) = -50px

    y:(200px - 100px) * (-50%) = 100px * (-50%) = -50px

    运行结果如图 4‑29 所示:

    背景图像百分比定位图4-29 背景图像百分比定位

    从上图可以看出,此时的背景图像只显示了原本图像的 1/4,这是因为背景图像的起始位置向左、向上移动后,只有1/4 的图案落到了背景区域。由于背景被设置为不重复,所以,就只显示了原本图像的 1/4。

    3)x y:表示使用长度值定位,是将背景图像的左上角,放置在对象的背景区域中(x, y)所指定的位置,即 x, y 定义的是背景图像的左上角,相对于背景区域左上角的偏移量。

    偏移量长度可以是正值,也可以是负值。x 为正值表示向右偏移,负值表示向左偏移;y 为正值表示向下偏移,负值表示向上偏移。背景图像发生移动后,就有可能超出对象的背景区域。此时,超出的部分将不会显示,只会显示落入背景区域的部分。

    如果把上面的例子改为长度值定位,要使背景图像居中,只需把背景图像的位置设置为50px 50px 即可。它就表示背景图像的左上角顶点,相对于对象背景区域的左上角顶点在 x轴右移 50px,在 y 轴下移 50px。得到的结果依然是背景图像位于对象的中央。

    在CSS3中,background-position属性支持 4 个参数值,前两个值用于横坐标,后两个值用于纵坐标。这意味着我们可以相对于上左下右任意一个角落定位,而不是之前只能相对于左上角定位。可以用长度值、或百分比来指定背景图像的起始位置。

    如果只提供一个值,则第二个值为center。如果提供两个值,第一个长度或百分比表示水平偏移,第二个长度或百分比表示垂直偏移。长度或百分比,表示背景图像的左上角相对于背景位置区域左上角的偏移。如,下面几个声明给出了背景的起点相对于背景区域左上角的偏移:

    
    
    1. background-position: left 10px top 15px; /* 10px, 15px */
    2. background-position: left top ; /* 0px, 0px */
    3. background-position: 10px 15px; /* 10px, 15px */
    4. background-position: left 15px; /* 0px, 15px */
    5. background-position: 10px top ; /* 10px, 0px */
    6. background-position: left top 15px; /* 0px, 15px */
    7. background-position: left 10px top ; /* 10px, 0px */

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • position: absoluteposition: relativeposition: fixedposition: staticposition: inherit本文主要详细讨论 position 属性的前三个值,首先大概讲解下后两个值: static static 为 position 属性的默认值,static ...
  • position 属性规定元素的定位类型,这个属性定义建立元素布局所用的定位机制,本文给大家介绍通过设置CSS中的position属性来固定层的位置,感兴趣的朋友一起学习吧
  • 定位的话,父DIV设置position:relative后,子DIV的position:absolute就会相对父DIV作绝对定位,接下来为大家介绍下CSS的position属性在DIV层中的应用
  • 目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE浏览器,IE9、IE10还没测试过),以下是w3school对position五个值的解释,有需要的朋友可以参考下
  • HTML中的position属性

    千次阅读 2019-07-23 16:22:53
    在CSS样式中,用的位置属性position,常用的有三种,releative,absolute,fix. releative 相对定位是相对于... absolute 绝对定位,相对于最近一个设置了position属性的元素,如果父元素没有设置position属性的,就...

    在CSS样式中,用的位置属性position,常用的有三种,releative,absolute,fix.

    • releative 相对定位是相对于原本元素的静态位置,设置left,top,right,bottom进行位置移动,不会脱离文档流。可以通过z-index进行分层级。
    • absolute 绝对定位,相对于最近一个设置了position属性的元素,如果父元素没有设置position属性的,就会依赖于body,进行定位。脱离文档流。可以通过z-index设置元素层级。设置left,top,right,bottom进行位置移动。
    • fix 固定属性,这个依赖于window窗口,跟html,body没有关系。设置left,right,top,bottom属性来移动位置。

    releative测试实例:

    <div class='releative_container'>
    	<div class='releative_p'>测试相对定位</div>
    	<div class='releative_p move'>测试相对定位</div>
    </div>

    CSS样式:

    .releative_container{
    	background: gray;
    	width: 300px;
    	height: 200px;
    }
    .move{
    	position: relative;
    	left: 30px;
    	z-index: 10;
    }

    absolute实例,且使用transform属性实现居中显示。

    <div class='div_container'>
    	<div class='child_div center'>
    
    	</div>
    <div>
    .div_container{
    
    	width: 900px;
    	height: 80%;
    	background: #ddd;
    	position: relative;;
    }
    .child_div{
    	background-color: blue;
    	width: 70%;
    	height: 70%;
    	position: absolute;
    }
    .center{
    	left: 50%;
    	top: 50%;
    	transform: translate(-50%,-50%);
    	z-index: 100;
    }

    fix 固定窗口

    
    <div class='alert'>
    	我是固定定位
    </div>
    
    .alert{
    
    	width: 100px;
    	height: 50px;
    	background: blue;
    	position: fixed;
    	right: 100px;
    	bottom: 40px;
    }

    学习博客:

    https://www.cnblogs.com/wzhiq896/p/5945289.html

    http://www.w3school.com.cn/cssref/pr_class_position.asp

    https://blog.csdn.net/dong_pt/article/details/51184896

    展开全文
  • css的position属性

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

    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>

     

    展开全文
  • position属性

    千次阅读 2018-04-17 10:47:55
    position属性是指本体相对于上级的定位,默认值是static,意味着没有被定位,出现在文档流中应该出现的位置如果用position来布局页面,父级元素的position必须是relative或者absolute行元素加了position:absolute;...
  • 主要介绍了详解CSS中position属性介绍(新增sticky) 的相关资料,position的含义是指定位类型,取值类型可以有:static、relative、absolute、fixed、inherit和sticky,这里sticky是CSS3新发布的一个属性,感兴趣的小...
  • CSS position属性使用说明,需要的朋友可以参考下。
  • 主要介绍了举例详解CSS中position属性的使用,是CSS入门学习中的基础知识,需要的朋友可以参考下
  • 主要介绍了CSS中position属性之fixed实现div居中的相关资料,需要的朋友可以参考下
  • CSS position 属性

    千次阅读 2016-11-14 16:08:51
    position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移。postion也是初学者容易搞不清楚状况的一个属性,本文将从最基础的知识讲起,谈谈关于...
  • 目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE浏览器,IE9、IE10还没测试过),以下是w3school对position五个值的解释,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 356,246
精华内容 142,498
关键字:

position属性