定位（position）属性有4个属性值 ， 分别是static、relative、absolute、fixed 。 本文重点讲解relative（相对定位）和absolute（绝对定位） 。 东西/材料 Adobe Dreamweaver CS5
操作方式 01 相对定位(relative)长短常轻易把握的概念 ， 通俗一点就是正常的块级定位 ， 只不外块级的位置是经由过程top、left、right、bottom属性来进行划定 。 不外 ， 本来所占用的空间并没有消逝 。 起首先来正常的定位 ， 如下图 。
文章插图
02 然后在正常定位的里面 ， 操纵position：relative来相对定位 ， relative属性值的父元素就是上图块元素 ， 如下图 。
文章插图
03 绝对定位(absolute)第一个特征就是会从文档流中离开 ， 不占有任何空间 。 它的定位属性也是跟相对定位一样 ， 经由过程top、left、right、bottom来进行划定 ， 如下图 。
文章插图
04 一个父元素里面包含多几个绝对定位 ， 若是绝对定位元素重叠在一路 ， 如下图 ， A和B重叠在一路了 ， 需要A在前面B在后面 ， 我们只需要在A里面添加z-index来节制 。
， 我们可以操纵z-index来节制哪个在前 ， 哪个在后 ， 如下图 。
文章插图
05 可是必然要切忌 ， 如若属性值为absolute ， 那么必然要共同relative为父元素的块来利用 。 若是没有共同 ， 如下图 。 会直接以body为父元素 。
文章插图
06 【网页布局中position定位讲解】静态定位(static)一般不利用 ， 它的属性值界说为没有定位 ， 元素呈现在正常的流中 。 忽略top, bottom, left, right ， 如下图 。
文章插图
07 固定定位（fixed）属性值的界说为浏览器窗口进行定位 。 通俗一点就是父元素为body ， 经由过程top, bottom, left, right来节制位置 。 如下图定位在relative里面 ， 然而并没有用果 。
文章插图
出格提醒 注重：属性值分歧所发生的结果分歧哦
以上内容就是网页布局中position定位讲解的内容啦 ， 希望对你有所帮助哦！
推荐阅读
- 如何更改PPT模板中的内容
- 中国空间站能住几个人 中国空间站可以住几个人
- 治疗胃疼茶方
- ppt中快速进行图片排版
- QQ邮箱附件如何下载
- Word2010如何让表格居中、表格内容居中
- 中国主要靠什么发电
- 中西节日文化差异
- 怎么确定家中风水财位在哪里？
- 小球藻的作用：营养素在肿瘤发生、发展中的作用