                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

老师帮忙看一下

深海皮皮虾

2019-07-09

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

关注问题我要回答

884

操作

收起

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/Cover@2x.png) 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 回复有任何疑惑可以回复我~

收起回答