9分35秒，在设置幻灯片切换样式（.slider .main .main-i）样式时，一旦绝对定位后两张图片均无法显示。
黑色梦幻100
2016-05-14 01:43
贴上样式代码：
/*幻灯片的切换*/
.slider .main .main-i{
opacity:0;
position:absolute; /*执行后无法显示图片*/
right:50%;
top:0;
}
.slider .main .main-i_active{
opacity:1;
}
Chrome浏览器，开发工具选中图片后显示为图片缩在左上角0px x 0px，但连个标题均正常显示。
使用绝对定位前：
使用绝对定位后：
麻烦各路大神帮小生解决一下，感激！！
6回答
-
- 慕的地2484329
- 2017-06-08 11:20:06
同样的问题
-
- 幸福回忆
- 2016-10-27 13:50:06
给它的父级设置高度即main-i{ height:100%}即可
-
- 不怕输的青春
- 2016-07-24 13:22:42
同样的问题，求解。
-
- 沫沫小青
- 2016-06-10 10:27:55
你的问题解决了吗？我和你一样，求知道解决方法，谢谢！
-
- 排骨年糕
- 2016-05-25 22:31:21
原因就是没有设置宽高。
这个类在视频2-1的4:27秒出现第一次，老师说了句“’.slider .main .main-i‘没有什么特殊的，我们就设置得和.main一样就可以了。”然后将独立的“.slider .main .main-i”设置成：
.slider .main .main-i，
.slider .main,
.slider
{
width: 100%;
height: 400px;
position: relative;
}从你贴出图片的部分代码中看出应该只设置了一次样式。往上翻到最开头，检查一下代码，自己设置一个宽高就可以了。
其实你自己列出的条件中已经包括了“显示为图片缩在左上角0px x 0px”，那你就在网页调试中设置个宽高试试呗，通过结果再回去复查代码~（不过当时你可能（像我一样）被绝对定位的问题吸吸吸住了...）
-
- 冷眼看尽繁华丿
- 2016-05-15 17:29:43
我的也是
JS+CSS3实现带预览图幻灯片效果
53759 学习 · 265 问题
相似问题