老师帮忙看一下
来源：13-9 Relative与Absolute组合使用
深海皮皮虾
2019-07-09 18:24
老师帮忙看一下
写回答
关注
3回答
-
- 慕斯0006980
- 2019-07-10 10:23:34
不知道你像想实现什么效果, 但应该父元素设置为position: relative; 子元素设置为position: absolute;
针对你这个,应该吧outerNode设置为relative. controlsNode设置为absolute,这样通过left right top buttom,就可以避免重合了.
-
- 深海皮皮虾
- 2019-07-09 18:26:26
上下两个盒子 音乐信息与控制台 定位有重合 是怎么回事呢
-
- 深海皮皮虾
- 2019-07-09 18:25:25
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;}
初识HTML(5)+CSS(3)-升级版
HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义
1225309 学习 · 18230 问题
相似问题