IT知识库 购物 网址 游戏 小说 歌词 快照 开发 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 编程 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> Html-Css -> 总结·CSS3中定位模型之position属性的使用方法 -> 正文阅读

[Html-Css]总结·CSS3中定位模型之position属性的使用方法

总结·CSS3中定位模型之position属性的使用方法 一、position元素介绍
position属性规定了元素的定位类型,通过定位,可准确地定义元素相对于其正常位置而应该出现的位置,或者是相对于父元素、另一元素和浏览器窗口等的位置。
position属性包含有5个属性值,分别为static、relative、absolute、fixed以及inherit。
具体属性值描述如下表格所示:
属性值 描述 所属类别 static
默认值,元素遵循默认的文档流。
  relative
元素遵循默认的文档流。
相对于元素的原位置进行移动,周围元素忽略该元素的移动。
需要设置top、bottom、left、right值进行定位。
相对定位 absolute
元素脱离正常文档流。
相对于包含该元素的第一个非静态定位的元素进行定位,若不满足条件,则会根据最外层的window进行定位。
需要设置top、bottom、left、right值进行定位。
绝对定位 fixed
元素脱离正常文档流。
相对于最外层的window进行定位,固定在屏幕上的某个位置,不因屏幕滚动而消失。
需要设置top、bottom、left、right值进行定位。
绝对定位(固定定位) inherit
继承父元素的position值。
设置position属性只会让元素脱离文档流,需要设置偏移属性使元素移动。包括4个偏移属性,分别为top、bottom、left、right。
具体描述如下表格所示:
偏移属性 描述 left 表示向元素左端插入多少距离,正值使元素右移多少距离。 right 表示向元素右端插入多少距离,正值使元素左移多少距离。 bottom 表示向元素下方插入多少距离,正值使元素上移多少距离。 top
表示向元素上方插入多少距离,正值使元素下移多少距离。
偏移属性的值可以为负值,负值时向相同方向移动。一般设置时设置一个或两个偏移量即可。
当元素中设置position为非默认值后,该元素会成为设定位置的元素。在元素变成设定位置后,就成为了最近的绝对定位后代元素的定位参考点,即该元素为设置为绝对定位子元素的第一个非静态定位的元素。
目前所有主流的浏览器都支持position属性的使用,但注意所有IE浏览器均不支持inherit属性值。
二、属性值详细介绍
首先设置示例的显示内容,分别设定了三个div块元素,并分别设置class属性值。HTML源代码如下:

<div class="div0">
    <div class="div1 div">This is div1.</div>
    <div class="div2 div">This is div2.</div>
    <div class="div3 div">This is div3.</div>
</div>

设置原始示例的显示效果,为了截图容易理解,将body设置为3px的红色边框。包围三个div块的大div块设置1px的黑边框,灰色的背景色以及50%的宽度。三个div块则设置相同的边框和100px的高度。CSS源代码如下:

body {
    border: 3px solid red;
}
.div0 {
    border: 1px solid black;
    width: 50%;
    background-color: #f0f0f0;
    margin: 50px;
}
.div {
    height: 100px;
    border: 1px solid black;
    margin: 20px;
    padding: 5px;
}

最终的示例效果图如下:

1、relative——使元素相对于文档流的位置偏移一段距离
元素遵循默认的文档流,相对于元素的原位置进行移动,周围元素忽略该元素的移动。需要设置top、bottom、left、right的值进行相对定位。
举个栗子:设置第二个div块的position属性为relative,并且设置偏移量为向右偏移50px、向下偏移50px。

.div2 {
    background-color: #e0e0e0;
    position: relative;
    left: 50px;
    top: 50px;
}

可以看到如下效果图中,第一和第三块div块并没有移动位置,说明relative属性值使元素遵循默认的文档流。设置偏移量后,第二块div块则向右、向下分别偏移50px。


.div2 {
    background-color: #e0e0e0;
    position: relative;
    left: -50px;
    top: 50px;
}

当设置左偏移量为-50px时,则如下图所示,第二元素块向左偏移了50px。

2、absolute——使元素相对于文档流的位置或最近定位祖先元素的位置偏移一定的距离
元素脱离默认的文档流,相对于包含该元素的第一个非静态定位的元素进行定位。需要设置top、bottom、left、right值进行j绝对定位。
对于元素,使用width、height可以设置它的尺寸,设定百分数是相对于最近定位祖先元素的尺寸。
举个栗子*2:设置第二个div块的position属性为absolute,并且设置偏移量为向右偏移50px、向下偏移50px。注意此时没有设置该元素的父元素的position值为非默认值。

.div2 {
    background-color: #e0e0e0;
    position: absolute;
    left: 20px;
    top: 20px;
}

可以从图中看到,第三块div元素向上移动,第二块元素脱离了原来的文档流。而在没有设置该元素的父元素的position值为非默认值时,第二块div元素块是相对于body的值来向右、向下偏移的。

 再来看设置了该元素的父元素的position值为非默认值的情况。

.div0 {
    border: 1px solid black;
    width: 50%;
    background-color: #f0f0f0;
    margin: 50px;
    position: relative;
}

当设置了该元素的父元素的position值为非默认值的情况时,此时的第二块div元素块则是相对于包含三个元素块的大div元素块来进行向右、向下的偏移。

 3、fixed——使元素相对于视口偏移一定的距离
元素脱离默认的文档流,相对于最外层的window进行定位,固定在屏幕上的某个位置,不因屏幕滚动而消失。需要设置top、bottom、left、right值进行定位。
举个栗子*3:设置第二个div块的position属性为fixed,并且设置偏移量为向右偏移20px、向下偏移200px。

.div2 {
    background-color: #e0e0e0;
    position: fixed;
    right: 20px;
    top: 200px;
}

从图中看出,第二个div元素块的位置在右下角,是相对于视口进行了向左20px、向下200px的偏移。并且在页面滑动时,也会保持着同样的位置不变。


 三、Z-index
Z-index可用于设置元素之间的层叠顺序。只对于定位元素有效,即只对于position属性的属性值为absolute、relative和fixed有效。静态定位元素按照文档出现顺序从后往前进行堆叠。设定位置元素忽略文档出现顺序,根据z-index值由小到大的顺序从后往前堆叠,即Z-index的值越高表示元素显示的顺序越优先。设置为负值z-index的设定位置元素位于静态定位元素和非设定位置浮动元素之下。z-index值不必为连续值,其默认值为auto。当设置的值相同时,后加载的元素优先显示。
举个栗子*4:将relative示例的元素设置-index值为-1。

.div2 {
    background-color: #e0e0e0;
    position: relative;
    left: 50px;
    top: 50px;
    z-index: -1;
}

从图中可以看到,当元素的z-index设置为负值时,设定位置元素是位于静态定位元素之下,即是di第二个div元素的父元素div0的位置之下。

 四、实际应用——使用绝对定位显示二级菜单
使用无序列表和Flex布局导航栏菜单,HTML源代码如下:

<ul class="MenuWrap">
    <li id="ListItem1">
        <a href="#" class="ListItem" >Home</a>
        <ul class="MenuWrap2" id="MenuWrap2">
             <li><a href="#" class="ListItem2">Item1</a></li>
            <li><a href="#" class="ListItem2">Item2</a></li>
            <li><a href="#" class="ListItem2">Item3</a></li>
        </ul>
    </li>
    <li id="ListItem2"><a href="#" class="ListItem">About</a></li>
    <li id="ListItem3"><a href="#" class="ListItem">Products</a></li>
</ul>            

将包裹二级菜单的ul元素设置的position属性设置为非默认值relative。再将二级菜单的position属性设置为绝对定位,根据一级菜单的高度设置偏移量。并且将二级菜单的显示方式display属性设置为none值表示不显示。最后再通过JavaScript设置鼠标悬浮经过一级菜单栏时显示二级菜单栏。CSS源代码如下:

.MenuWrap {
    background-color: #f0f0f0;
    min-height: 2.75em;
    display: flex;
    align-items: center;
    list-style-type: none;
    position: relative;
}
.ListItem {
    color: black;
    text-decoration: none;
    padding:0px 20px;
}
ul.MenuWrap2 {
    padding: 0px;
}
.MenuWrap2 {
    list-style-type: none;
    background-color: #f0f0f0;
    min-width: 4.5em;
    text-align: center;
    position: absolute;
    top: 2.75em;
    display: none;
}
.MenuWrap2 li {
    padding-bottom: 5px;
}
.ListItem2 {
    color:black;
    text-decoration: none;
}

最后的效果图如下:

 五、总结
元素的定位模型中需要区分每个属性值的不同定位方式,分为绝对定位、相对定位、固定定位以及默认定位和继承父元素。其中绝对定位和固定定位都脱离原本的文档流,而相对定位则遵循原本的文档流。设置元素的定位方式后,还需要指定偏移量。可以从上、右、下、左四个方向进行偏移。并且可以利用Z-index属性设置元素之间的层叠顺序。
定位模型是在CSS中设置元素位置的重要方式之一,使用该模型可以实现页面常用的菜单导航、悬浮公告等效果。
上一篇文章      下一篇文章      查看所有文章
加:2017-06-20 01:45:51  更:2017-06-20 01:46:07 
 
  Html-Css 最新文章
近期前端中的 一些常见的面试题
近期前端中的 一些常见的面试题
localStorage使用总结
前端
图文详解前端CSS中的Grid布局,你真的可以5
CSS3 按钮特效(一)
HTML
ionic APP二维码插件 地址
为什么在CSS中不要再使用@import
CSS 笔记
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 新闻资讯 小游戏 Chinese Culture 股票 三丰软件 开发 中国文化 网文精选 阅读网 看图 日历 万年历 2018年12日历
2018-12-11 17:54:03
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库