                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /初識HTML(5)+CSS(3)-升級版

老師幫忙看一下

老師幫忙看一下?

深海皮皮蝦

2019-07-09

源自：初識HTML(5)+CSS(3)-升級版 13-9

關注問題我要回答

923

操作

收起

3 回答

慕斯0006980
2019-07-10

不知道你像想實現什么效果,? 但應該父元素設置為position: relative; 子元素設置為position: absolute;

針對你這個,應該吧outerNode設置為relative. controlsNode設置為absolute,這樣通過left right top buttom,就可以避免重合了.

0 回復有任何疑惑可以回復我~

收起回答

深海皮皮蝦提問者
2019-07-09

上下兩個盒子音樂信息與控制臺定位有重合是怎么回事呢

0 回復有任何疑惑可以回復我~

收起回答

深海皮皮蝦提問者
2019-07-09

html：

<!DOCTYPE?html><html?lang="zh"><head><meta?charset="UTF-8"><meta?name="viewport"?content="width=device-width,?initial-scale=1.0"><meta?http-equiv="X-UA-Compatible"?content="ie=edge"><title>音頻播放器</title><link?rel="stylesheet"?type="text/css"?href="./css/base.css"></head><body><div?class="outerNode"><!--?音樂信息?--><div?class="informNode"><!--?封面圖?--><div?class="coverNode"></div><!--?音樂名稱?--><div?class="nameNode">Can't?Help?Falling?In?Love</div><!--?作者?--><div?class="authorNode">Elvis?Presley</div></div><!--?控制臺?--><div?class="controlsNode"><div?class="lineNode"></div></div></div></body></html>

css

*?{padding:?0;margin:?0;list-style:?none;}html,body?{width:?100%;height:?100%;background:?#0C0E14;font-family:?'Helvetica'}.outerNode?{width:?375px;height:?667px;background:?#151926;box-shadow:?0?8px?32px?rgba(0,?0,?0,?0.6);margin:?80px?auto;}/*?音樂信息?*/.informNode?{width:?375px;height:?406px;position:?relative;top:?64px;left:?0;}/*?封面圖?*/.coverNode?{width:?290px;height:?310px;background:?url(../images/[email protected])?no-repeat?center?center;background-size:?cover;margin:?0?auto;}/*?名稱?*/.nameNode?{width:?100%;height:?32px;font-size:?24px;text-align:?center;color:?#fff;font-family:?'PingFang?SC';line-height:?32px;font-weight:?200;margin-top:?40px;}/*?演唱者?*/.authorNode?{width:?100%;height:?24px;font-size:?14px;text-align:?center;color:?#656D85;line-height:?24px;}/*?控制臺?*/.controlsNode?{width:?375px;height:?auto;position:?relative;top:?48px;}/*?進度條?*/.lineNode?{width:?343px;height:?12px;margin:?0?16px;}

0 回復有任何疑惑可以回復我~

收起回答