[网页设计]CSS 定位之position

时间 2019-11-19

原文原文链接

在前端网页布局中，在同一平面上布局，咱们大都采用float属性来定位网页元素的位置。可是涉及到弹出层、浮层、页面广告插件等等，都须要CSS 中的position属性来定位了，对于初学者来讲常常分不清楚是应该用position属性的absolute值、relative值、fixed值等等，下面咱们就position属性基本的这三个值的用法作一些简单的介绍，但愿对初学者有些帮助。css

一、position的absolute（绝对定位）html

　　在这里position的absolute绝对定位咱们分两类来说：前端

　　A：给元素定义了position:absolute，其父框架没有定义任何position属性。此时的绝对定位就是相对于页面四周最边缘来进行定位的，位置将依据浏览器左上角的0点开始计算，绝对定位使元素与文档流无关，所以不占据空间。元素的位置经过 "left", "top", "right" 以及 "bottom" 属性进行规定。其位置不受父框架的影响，只以页面四周边缘开始计算。代码以下：web

<!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000;}</style></head><body><div ><div >position:absolute;<br />left:100px;<br />top:200px;<br /></div></div></body></html>

效果以下图：编程

B：给元素定义了position:absolute，其父框架定义了position:absolute\position:relative \position:fixed属性。此时的绝对定位就是相对于父框架最边缘最边缘来进行定位的，绝对定位使元素与文档流无关，所以不占据空间。元素的位置经过 "left", "top", "right" 以及 "bottom" 属性进行规定。其位置只在父框架内作变化，代码以下：浏览器

<!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000; position:relative}</style></head><body><div ><div >position:absolute;<br />left:100px;<br />top:200px;<br /></div></div></body></html>

效果以下图框架

因此，若是页面元素的定位，想要定义在父元素内，而不受显示器分辨率，浏览器窗口大小等限制时，建议采用B种方案。工具

二、position的relative（相对定位）布局

　　若是对一个元素进行相对定位，首先它将出如今它所在的位置上。而后经过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动。（再一点，相对定位时，不管是否进行移动，元素仍然占据原来的空间。所以，移动元素会致使它覆盖其余框）。post

relative的确是相对于本身来定位的,父DIV设置了position:relative 没有给出值，它自身是没有效果的
可是对于它的子元素起到了参照做用

三、position的fixed fixed老是以body为定位时的对象，老是根据浏览器的窗口来进行元素的定位，经过"left"、 "top"、 "right"、 "bottom" 属性进行定位。

关于position用法貌似还有不少，小编语言组织能力不是太好，总结一下用法：

当你须要作一个有下拉二级菜单效果时，父元素你须要position:relative，而里面的下拉元素则须要position:absolute。

当你须要作一个页面漂浮的广告，或者作一个返回页面顶端的按钮是，你须要position:fixed。

通常咱们使用position:absolute；position:relative进行绝对定位布局，经过CSS进行定义定位，DIV布局HTML，注意什么地方使用position:relative，什么地方使用position:absolute进行定位，同时不要忘记使用left、right、 top、bottom的配合定位具体位置。绝对定位若是父级不使用position:relative，而直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义对象不管位于DIV多少层结构，都将会被拖出以<body>为父级（参考级）进行绝对定位。绝对定位很是好用，但切记不要滥用，什么地方都用，这样有时会懒得计算距离上、下、左、右间距，同时可能会形成CSS代码臃肿，更加经验适当使用，用于该使用地方。
在绝对定位时候咱们可使用css z-index定义css层重叠顺序。
同时left、right、bottom、top的数值，可使用（Photoshop）PS切片工具获取准确的数值。

末了，小编在提醒一句，若是你在你的父DIV里面的子DIV使用了position:absolute属性定位，而父DIV没有作任何定义（父DIV里面已经被其余元素填充占据），还想要子DIV定义起到做用，这个时候子DIV你能够不用left、top、right、bottom来定义，可使用 margin-top、margin-left来定义，可是此种方法在ie6/7下和ie8/9/10/十一、火狐、谷歌下面的位置是不同的，针对 ie6/7你须要用到css Hack，代码以下：

<!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; margin-left:100px; margin-top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}</style></head><body><div ><img src="1.jpg" width="600" height="600" /><div >position:absolute;<br />margin-left:100px;<br />margin-top:200px;<br /></div></div></body></html>

效果以下图

使用CSS Hack以后代码：

<!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; margin-left:100px; margin-top:-400px;*margin-top:200px;*margin-left:-500px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}</style></head><body><div ><img src="1.jpg" width="600" height="600" /><div >position:absolute;<br />margin-left:100px;<br />margin-top:200px;<br /></div></div></body></html>

在各个版本的浏览器下的效果以下

此种方法最好不要使用在不一样版本浏览器下须要来回的用CSS Hack调整！

CSS position 属性

版本: CSS2 JavaScript 语法: object.style. position="absolute"可能的值值描述 absolute 生成绝对定位的元素,相对于 static 定位之外的第一个父元素进行定位。 ...

CSS定位属性Position详解 - 页制做 - 蓝色理想

CSS中最经常使用的布局类属性,一个是Float( CSS浮动属性Float详解),另外一个就是 CSS定位属性 Position。 1. position:static 全部元素的默认定位都是: position:static,这...

CSS 定位

CSS position 属性经过使用 position 属性,咱们能够选择 4 种不一样类型的定位,这会影响元素框生成的方式。 position 属性值的含义: static 元素框正常生成。块级...

CSS中的定位标签position_websbook_页设计手册

文中详细解释了关于 CSS定位标签 position的一些属性与使用方法,咱们常常是使用 position标记来制做绝对定位与相对定位的浮动效果,好比二级菜单浮动效果就是使用这个标记制...

CSS 定位之position - 推酷

在前端页布局中,在同一平面上布局,咱们大都采用float属性来定位页元素的位置。可是涉及到弹出层、浮层、页面广告插件等等,都须要 CSS中的 position属性来定位了,...

position=absolute之相对父元素定位-css-电脑编程

[] css, position, absolute, 相对, 定位 position=absolute之相对父元素定位 absolute:相对于 static 定位之外的第一个父元素进行定位。也就是父元素的 position取值...

CSS中position:fixed固定定位用法指导 - 51CTO

CSS布局浮动(float)和定位(position)属性的区别和如何..._标准之路

postion:relative是子块级元素面向父级元素的相对定位, 定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位,可是 position移动后,原位置...

CSS定位(position : static|absolute|fixed|relative)|中国页设计

页配色页布局设计欣赏页设计理论 HTML/HTML5 CSS Javascript Dreamweaver FLASH CSS定位( position : static|absolute|fixed|relative)...

IE6下实现CSS固定定位{position:fixed}_源码爱好者

IE6下实现 CSS固定定位{ position:fixed},绝对 定位CSS实现。运行一下代码就会发现它的利害。固定和相对定位,是 CSS中两种常常用到的基础技巧,有必要经过这些小实例掌握其...

十步图解CSS的position - 博客 - 伯乐在线

CSS页布局关于定位position - CSS教程 - 芊蓝大 - 芊蓝教程...

1 DIVCSS视频教程之position定位属性在线观看 - 酷6视频

时长: 45分钟

1DIVCSS视频教程之position定位属性在线观看，1DIVCSS视频教程之position定位属性

v.ku6/show/XIal-bWyj... 2015-1-3

总结一下CSS中的定位 Position 属性 - Rising_Sun - 博客园

在 CSS中, Position 属性常常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤为嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之。 CSS position 属性...

css中position相对定位和绝对定位(relative,absolute)详解

CSS元素之position 定位 | 学步园

css元素定位 - 蓝色理想

第1 页 css元素定位 [1] 第2 页 css元素定位 [2]1. position:static|无 定位position:static是全部元素定位的默认值, 通常不用注明,除非有须要取消继承的别的...

详解CSS定位属性Position用法_CSS教程_站建设学院_希赛

CSS中最经常使用的布局类属性,一个是Float( CSS浮动属性Float详解),另外一个就是 CSS定位属性 Position,这里向你们描述一下 CSS定位属性 Position的用法。

DIV CSS绝对定位布局案例 position布局实例 - DIVCSS5

CSS样式表中的position属性详细说明_CSS教程_CSS_页制做_脚本之家

CSS position属性使用说明,须要的朋友能够参考下。... CSS position属性使用说明,须要的朋友能够参考下。在 CSS中关于 position定位的内容是: position: relative | ...

css定位属性position的相对定位与绝对定位 - 鲁谷-lugu design-...

简明CSS定位属性position_解读张小龙产品秘诀:让用户爽!_脚本百事通

简明 CSS定位属性 position点评: POSITION属性用来决定元素在页面上的位置,其定位属性有多个,下面一一为你们介绍下,但愿你们在使用过程当中能够用到 POSITION 该...

CSS定位属性position的应用_图片_DREAMWEAVER_教育_阿邦

[] CSS定位属性 position的应用黄超 dreamweaver (394) 推广连接: