请问这里的绝对定位有什么作用,又如何清除绝对定位带来的脱离文档流作用

请问这里的绝对定位有什么作用,又如何清除绝对定位带来的脱离文档流作用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>习题</title>
    <style type="text/css">
      div {
            position: absolute;
            background-color: red;
        }

        .blue {
            background-color: blue;
        }
    </style>
</head>
<body>
<h1>修改元素样式</h1>
<div class="blue"></div>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
   $(function () {
       var div=$('div');
       div.removeClass('blue')
       div.addClass('div')
       div.width(200)
       div.height(200)
       div.offset({
        left:50,
        top:100
       });
           });
</script>
</body>
</html>

为什么要添加绝对定位呢,添加了,我想下面的列表也不受影响的话该怎么做

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

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

2回答
好帮手慕糖 2017-12-25 16:21:43

你好,如果相邻的兄弟元素是不行的,你可以尝试给绝对定位的元素,添加一个父级元素,然后设置其高度。

祝学习愉快~

好帮手慕糖 2017-12-25 14:43:21

你好,这里也不是非要使用绝对定位,也可以尝试是用相对定位,相对定位的话,不会脱离文档流。添加定位的话,才可以使用left、top属性呀。

祝学习愉快~

  • 提问者 qq_陌_45 #1
    那要如何清除绝对定位带来的塌陷呢
    2017-12-25 16:11:37
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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