可以将absolute改成fixed吗?区别是什么?请老师检查代码,谢谢

可以将absolute改成fixed吗?区别是什么?请老师检查代码,谢谢

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{margin: 0;

padding: 0;

color: white;

font-family: "微软雅黑";

list-style: none;

font-size: 20px;

font-weight: bold;

text-decoration: none;

}

.nav{

width: 1100px;

height: 100px;

background-color: black;

position:absolute;

top: 50%;

left:50%;

margin-top:-50px;

margin-left: -550px;

}

.logo{

float: left;

margin-left: 0;

}

.list{

float: right;

}

li{

display: inline-block;

margin: 5px 30px;

line-height: 100px;

}

</style>

</head>

<body>

<div class="nav">

<div class="logo"><a href=""><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" alt=""></a></div>

<div class="list">

<ul>

<a href=""><li>课程</li></a>

<a href=""><li>职业路径</li></a>

<a href=""><li>实战</li></a>

<a href=""><li>原文</li></a>

<a href=""><li>手记</li></a>

</ul>

</div>

</div>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕星星 2020-10-12 11:33:18

同学你好,问题解答如下:

1、右侧导航项盒子高度超出父容器

http://img1.sycdn.imooc.com//climg/5f83cc4d0947da9d06260172.jpg

这是因为li设置了固定的上下间距超出了。建议修改为0

http://img1.sycdn.imooc.com//climg/5f83ccc709c3ee1303110143.jpg

2、当前练习absolute绝对定位可以改变fixed固定定位,因为内容较少,垂直方向没有出现滚动条。absolute定位是相对于页面来说的,页面滚动的时候,一般元素也会跟着滚动;而fixed固定定位是相对于视口来说的,页面滚动的时候,元素固定不动。例如给body添加高度

http://img1.sycdn.imooc.com//climg/5f83ce6209102e0702380083.jpg

自己再测试下,祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师