HTML5技术

css position - 刘江龙

字号+ 作者:H5之家 来源:H5之家 2016-11-20 18:00 我要评论( )

position pre b { font-size font-family .defaulttext { color font-style font-weight .sample0 { border width height position background-color .sample0_child { position width: 200px;height: 100px; */ background-color bottom right top left pos

position pre b{ font-size font-family .defaulttext{ color font-style font-weight .sample0{ border width height position background-color .sample0_child{ position width: 200px; height: 100px;*/ background-color bottom right top left position--设置定位方式,设置参照物 top,right,bottom,left,z-index--设置位置,必须配合position使用,如果一个元素不是一个定位元素,设置了这些属性是不起效果的。 上面这两项结合就能定 一个元素在浏览器中的位置 1. top/right/bottom/left 边缘与参照物边缘距离: 默认 top:0,left:0 边缘和参照物边缘的位置, 可以是负值如果不给子div设置宽高,只设置 position 和left top right bottom 这些边缘间距离值,那么子div 会被撑大 .zparent{ width height position border font-family font-size .z01{ text-align line-height position background-color color width height z-index top left .z02{ text-align line-height position background-color color width height z-index top left .z03{ text-align line-height position background-color color width height z-index top left2. z-index Z轴,默认值 auto 适用于position 非static 元素z-index:1z-index:2z-index:3 默认情况下(没有设置z-index属性),元素会按照文档流中出现的顺序,晚出现的盖在早出现的上面。 是不是z-index值越大的越好呢?不一定,因为z-index还有一个『z-index 栈』的概念 .zparent_{ position width height border margin-top font-family font-size .zchild_{ position text-align width height color font-size line-height font-family .zparent_1{ z-index background-color .zchild_1{ background-color bottom left z-index .zchild_3{ background-color bottom left z-index .zparent_2{ z-index background-color .zchild_2{ background-color top left z-indexz-index: 1; z-index: 1z-index: 2z-index: -1; z-index : 13. position 位置:position: static|relative|absolute|fixed 3.1 position:relative 仍在文档流中。 相对定位元素的参照物是 元素本身。 可以改变元素在 Z 轴上的层级。 .relative{ height width color font-size font-family .relative_0{ background-color bottom left position .relative_1{ background-color top left position .relative_2{ background-colorposition: relative;position: relative;3.2 position:absolute 默认宽度为内容宽度。 脱离文档流。 参照物为第一个定位祖先/根元素。 .absolute_container{ width margin line-height border position .absolute_sample{ background-color position bottom left绝对定位元素的前序元素sample绝对定位元素的后序元素3.3 position:fixed 默认宽度为内容宽度。 脱离文档流。 参照物为视窗。 .fixed_container{ width height border color .fixsample{ background-color width height .fixed_sample{ position bottom left background-colorfixed元素的前序元素 position:fixed; bottom: 10px; left: 0; fixed元素的后序元素

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html的层叠次序---真没有想象的简单 - 刘江龙

    html的层叠次序---真没有想象的简单 - 刘江龙

    2016-11-21 10:00

  • 居中导航 - 刘江龙

    居中导航 - 刘江龙

    2016-11-03 13:00

  • 多列布局 - 刘江龙

    多列布局 - 刘江龙

    2016-11-03 11:00

  • CSS Float 以及相关布局模式 - 刘江龙

    CSS Float 以及相关布局模式 - 刘江龙

    2016-11-03 10:00

网友点评
l