css教程(20):css position

2017年05月08日 13:45 | 198次浏览 | 分类: css教程 作者原创 版权保护

在 CSS 中常见的位置 (position) 属性有以下几种:

position

top

right

left

bottom

overflow

z-index

position

position 属性制定出要用哪一类的位置。可能的值有:

static (预设值): 这代表元素会被放在预设的地方。如果 position 的值是被设定为 statics 的话,那 top、bottom、left、和 right 的值就都没有意义了。

absolute: 这代表元素会被放在浏览器内的某个位置 (依 top、bottom、left、和 right 的值而定)。当使用者将网页往下拉时,元素也会跟著改变位置。

relative: 这代表元素被放的地方将会与预设的地方有所不同。不同的程度是依照 top、bottom、left、和 right 的值而定。

fixed: 这代表元素会被放在浏览器内的某个位置 (依 top、bottom、left、和 right 的值而定)。当使用者将网页往下拉时,元素的位置不会改变。

top, right, bottom, left

每一个方向 (top, right, bottom, left) 的位置值可以是长度、百分比、或是 auto。


让我们来看个例子:

css代码

div { 
  background-color:#FF00FF; 
  width:500px; 
  height:60px; 
}
p { 
  position:relative; 
  top:10px; 
  left:50px; 
}

html代码

<div> 
  <p>举例文字。 
</div>

效果

舉例文字。

请注意以上文字的位置:它是在离粉红色方块上面 10px,及左边 50px 的地方。


overflow

overflow 属性是用来设定当内容放不下时的处理方式。可能的值包括:

visible: 内容完全呈现,不管放得下放不下。

hidden: 放不下的内容就不显示出来。

scroll: 无论内容放得下放不下,都加入上下卷轴及左右卷轴的功能。

auto: 当内容放不下时,加上卷轴的功能。


z-index

z-index 属性是用来决定元素重叠的顺序。换言之,当两个元素有重叠的情况时,z-index 值将会决定哪一个元素在上面。z-index 值比较大个元素会被放在上面。


举例来说,假设我们有以下的 CSS 码:

#redblock { 
  z-index: 1; 
  position: 
  absolute; 
  width:80px; 
  height:100px; 
  top:20px; 
  left:20px; 
  border: 1px solid #FFF; 
  background-color: #FF0000; 
} 

#pinkblock { 
  z-index: 2; 
  position: absolute; 
  width:100px; 
  height:80px; 
  top:50px; 
  left:50px; 
  border: 1px solid #FFF; 
  background-color: #FF00FF; 
}

以下的 HTML 代码

<div id="redblock"></div> 
<div id="pinkblock"></div>

效果如下

从以上可见,粉红色方块 (pinkblock) 的 z-index 值 (2) 比红色方块 (redblock) 的 z-index 值 (1) 高,因此粉红色方块在上面。


此文章本站原创,地址 http://www.vxzsk.com/894.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程


上一篇:vue 事件修饰符 下一篇:Spark reduceByKey
^