为啥消失了

为啥消失了

为什么设置了位置relative,元素直接消失了

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        .test{

            position:relative;

            /*position:absolute;*/

            width: 100px;

            height: 100px;

            background: red;

            /*此处写代码*/

            right:200px;

            bottom:100px;

    

        }

     </style>

</head>

<body>

    <div class="test"></div>

</body>

</html>


正在回答

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

1回答

同学你好,因为设置了方位值

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

相对定位是根据自身位置进行移动的,默认在左上角显示,设置bottom属性为100px,也就是移动后的位置距离默认位置底部有100px,所以会向上移动;left也是一样的道理,所以会看不到元素。

而绝对定位是相对于页面位置来说的,效果不一样,自己可以再测试理解下。

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 意思是相对原本他的位置移动,设置right和bottom 元素就像左上移动跑出去了是吗?
    2020-02-21 22:09:42
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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