举例详解CSS中position特性的应用

日期:2021-03-05 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序

position 这个特性决策了元素将怎样精准定位。它的值大约有下列5种:

每一个网页页面都可以以当做是由1层1层网页页面层叠起来的,以下图所示。

position 设定为 relative 的情况下,元素仍然在一般流中,部位是一切正常部位,你能够根据 left right 等挪动元素。会危害别的元素的部位。

而当1个元素的 position 值为 absolute 或 fixed 的情况下,会产生3件事:

把该元素往 Z 轴方位移了1层,元素摆脱了一般流,因此已不占有原先那层的室内空间,还会遮盖下层的元素。
该元素将变成块级元素,非常于给该元素设定了 display: block;(给1个内联元素,如 <span> ,设定 absolute 以后发现它能够设定宽高了)。
假如该元素是块级元素,元素的宽度由原先的 width: 100%(占有1行),变成了 auto。
由此观之,当 position 设定为 absolute 或 fixed,就没必要设定 display 为 block 了。并且假如你不想遮盖下层的元素,能够设定 z-index 值 做到实际效果。

下面看来1下软件的主要参数用法示例:

1. position:static

全部元素的默认设置精准定位全是:position:static,这代表着元素沒有被精准定位,并且在文本文档中出現在它应当在的部位。

1般来讲,无需特定 position:static,除非要想遮盖以前设定的精准定位。

CSS Code拷贝內容到剪贴板
  1. #div⑴ {   
  2.  position:static;   
  3. }  

2. position:relative

假如设置 position:relative,便可以应用 top,bottom,left 和 right 来相对元素在文本文档中应当出現的部位来挪动这个元素。【意思是元素具体上仍然占有文本文档中的原来部位,只是视觉效果上相对它在文本文档中的原来部位挪动了】

CSS Code拷贝內容到剪贴板
  1. #div⑴ {   
  2.  position:relative;   
  3.  top:20px;   
  4.  left:-40px;   
  5. }  

3. position:absolute

当特定 position:absolute 时,元素就摆脱了文本文档【即在文本文档中早已不占有部位了】,能够精确的依照设定的 top,bottom,left 和 right 来精准定位了。

CSS Code拷贝內容到剪贴板
  1. #div⑴a {   
  2.  position:absolute;   
  3.  top:0;   
  4.  rightright:0;   
  5.  width:200px;   
  6. }  

4. position:relative + position:absolute

假如大家给 div⑴ 设定 relative 精准定位,那末 div⑴ 内的全部元素都会相对性 div⑴ 精准定位。假如给 div⑴a 设定 absolute 精准定位,便可以把 div⑴a 挪动到 div⑴ 的右上方。

CSS Code拷贝內容到剪贴板
  1. #div⑴ {   
  2.  position:relative;   
  3. }   
  4. #div⑴a {   
  5.  position:absolute;   
  6.  top:0;   
  7.  rightright:0;   
  8.  width:200px;   
  9. }  

5. 两栏肯定精准定位

如今便可以应用相对性精准定位和肯定精准定位来做1个两栏合理布局了。

CSS Code拷贝內容到剪贴板
  1. #div⑴ {   
  2.  position:relative;   
  3. }   
  4. #div⑴a {   
  5.  position:absolute;   
  6.  top:0;   
  7.  rightright:0;   
  8.  width:200px;   
  9. }   
  10. #div⑴b {   
  11.  position:absolute;   
  12.  top:0;   
  13.  left:0;   
  14.  width:200px;   
  15. }  

6. 两栏肯定精准定位定高

1种计划方案是给元素设置固定不动高宽比。但这类计划方案对大多数数设计方案来讲不太合适,由于1般大家不知道道元素中会有是多少文字,或即将应用的精准的字号。

CSS Code拷贝內容到剪贴板
  1. #div⑴ {   
  2.  position:relative;   
  3.  height:250px;   
  4. }   
  5. #div⑴a {   
  6.  position:absolute;   
  7.  top:0;   
  8.  rightright:0;   
  9.  width:200px;   
  10. }   
  11. #div⑴b {   
  12.  position:absolute;   
  13.  top:0;   
  14.  left:0;   
  15.  width:200px;   
  16. }  

上一篇:英语版企业网站建设计划方案 返回下一篇:没有了