老师,我好像知道啦。视频里定位元素指的是tag上的posotion attribute。
fixed应该也可以吧
如果要创建层叠上下文,需要是定位元素,且z-index属性不为auto ,你说的block块状水平盒子 是在同一个层叠上下文中的层叠水平比较,个人理解哈
是的 1
是的,没错,可以打开控制台看一下
靠 猥琐
学了几天。。。
不是后来居上吧 我把图片放到后面文字还是会在图片上面 应该是float覆盖了inline的特性
<!doctype> <html> <head> <style> @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } body { margin: 0 0; padding: 0 0; } text { position: absolute; /*根据图片调节,我的图片是200px*200px*/ width: 200px; margin: 180px auto; text-align: center; } img { animation:fadein 5s 1; -webkit-animation:fadein 5s 1; /* Safari 和 Chrome */ } </style> </head> <body> <text>看看看看看看看看看</text> <img src="1.jpg" alt=""> </body> </html>
自己写的
在动态模板上使用popup组件,仅仅加class和dom是不行的,也需要用动态模板的方式创建popup,参看官方文档
学过数学的数轴吧?z-index就相当于Z轴,z-index:33 就是它在Z轴的具体位置
position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像position:fixed,它会固定在目标位置。
这是一个css样式,z-index是改变元素的层级,数值越大,层级越高。有一个很直观的方法,就是打开Chrome/Firefox中审查元素(F12),在这个开发者工具有一个叫3D视图的东西,点击它就能看到一个网页的立体视图,层级一目了然。
可以设置hover时图片发生位移,定位到顶层
position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像position:fixed,它会固定在目标位置。
自己敲一段代码试试
如果你用过ps那么知道图层的原理 z-index跟图层的原理差不多
我也感觉废话超多
position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体,目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像position:fixed,它会固定在目标位置。一些常见的应用这个属性的一般是侧边栏和底部内容
如果父元素z-index有效,那么子元素无论是否设置z-index都和父元素一致,会在父元素上方。详细参考连接——http://www.cnblogs.com/dolphinX/p/3262469.html
一般的定位元素(z-index未设置,默认auto)是不会创建层叠上下文的。所以你的例子 父元素的背景当然就被子元素覆盖,而sisiter元素block当然就覆盖img元素(inline-block)。然后说下层叠上下文。层叠上下文只是针对子元素的。这样index数值是负数的时候就会显示在父元素背景之上!!
拥有嵌套关系的z-index的属性是由其父节点决定其所在的位置,上述有两个被div包裹的img标签,虽然上一个z-index属性比下一个z-index的值要大,但是按不加父节点来说是遵循大者为上,小者为下,所以小的z-index的值就是父节点。
PPT
老师应该把img放在box里面,所以box作为父元素,也是z-index为数值的定位元素,具备了层叠上下文,所以在这个box里面,img作为行内元素,优先级>父元素背景色
你这个代码写的是container、img都各自创建了一个层叠上下文,但是他们的父元素的层叠上下文都属于根标签,这样container和img都属于兄弟级别的元素,而container的z-index高于img,所以会覆盖img。老师讲的应该是img和父元素wrap之间的z-index设置。如果你将父元素的z-index设置为0,就会发现wrap被图片覆盖。因为此时img的层叠上下文不是根标签,而是wrap,wrap就变成了background,所以img的index:-1高于background,会覆盖掉wrap。
后来居上原则好像要有定位吧,老师代码中没有定位呀。按照7阶层叠水平来看,block比inline、inline-block的层叠顺序低。