老师您好，我想请教下伪类元素的定位问题

<body>
  <div class="sky">
    <div class="cloud one"></div>
    <div class="cloud two"></div>
    <div class="cloud three"></div>
    <div class="cloud four"></div>
    <div class="cloud five"></div>
  </div>
  <div class="grass"></div>
  <div class="rabbit"></div>
</body>

.cloud{
    width: 100px;
    height: 100px;
    background: #fff;
    position: relative;
    left: 100px;
    border-radius: 50%;
  }
  .cloud::before{
    content: '';
    position: absolute;
    left: -80px;
    bottom: 5px;
    width: 190px;
    height: 50px;
    background: #fff;
    border-radius: 25px 25px 30px 30px/ 25px 25px 25px 25px;
  }

如上代码所示的结构，伪类元素.cloud:after是以.cloud为基准定位，那么我还想要给.cloud添加整体的定位该怎么办呢？

兰香川川 2019-10-09

源自：项目：CSS3实现汉克狗案例 2-14 项目作业

收起

2回答

好帮手慕糖回答被采纳获得+3积分 2019-10-09 18:53:27

同学你好，1、可以的哦，可以直接将cloud的相对定位改为绝对定位。这样伪类依然可以参考其定位。不会失效。

2、如下，在结构上，伪类相当于cloud的子元素，而子元素定位可以参考有（除静态定位以外的）定位的父级元素，所以这里cloud是相对定位或者绝对定位都是可以的哦。

3、因为cloud有5个元素，设置绝对定位之后，需要单独设置每一个的位置，不然就是叠在一起的哦。例：

希望能帮助到你，祝学习愉快！

收起回答

兰香川川提问者 #1

非常感谢！！！

2019-10-09 18:54:56

好帮手慕糖 2019-10-09 16:39:34

同学你好，.cloud添加整体的定位，是指连同其伪类也调整（包含在内）吗？

直接给.cloud添加定位，调整位置就好了哦。

若不是这个意思，可以在详细的描述下。

祝学习愉快！

收起回答

提问者兰香川川 #1

我的意思是我给.cloud这个DIV添加了position: relative这个属性，因为这个div的伪元素（:after和:before设置的position: absolute）。现在我需要设置.cloud这个div的位置该怎么办，因为它的position已经是relative了，不能改为absolute吧，那样的，伪类元素（after和before）的定位就失效了。

2019-10-09 18:09:34