根据body而不是相对父元素定位元素

Question

我有一个具有相对位置的 div 和两个使用它的孩子，并且都具有绝对位置。我需要它们。但我想在相对 div 中创建另一个孩子并给它绝对位置。但现在的问题是我希望它的某些部分出现在元素之外。那么如何在 CSS 中做到这一点呢？提前致谢。

参考我需要的是：Example of what I need, check the search icon. How it is placed. I want that kind of thing.

div {
   //Parent div
    position:relative;
}
div {
   //Child div
    position:absolute;
}
div {
   //Child div
    position:absolute;
   //This is an emoji
   //But I want this to appear half outside of the parent div,
   //i.e. on the border of the parent div
}

Answer 1

在给定的示例中，section 是父 div，它是相对的，其余 2 个子 div，或者您可以拥有任意多个，全部都是绝对的，并且图像按照您的要求在边框外

* {margin: 0; padding: 0; box-sizing: border-box;}
img {max-width: 30px;}
section {border:15px solid #ccc; border-radius: 20px; height: 100px; position: relative;}
.child {position: absolute;}
.child1 {top: 50%; left: 50%; transform: translate(-50%,-50%);}
.childEmoji {top: 0; left:0; transform: translate(-50%,-50%);}

<section>
  <div class="child child1">Child 1</div>
  <div class="child childEmoji"><img src="https://images.macrumors.com/t/45wRHEDrpfO6dWOSqibLkzcZG-s=/800x0/filters:quality(90)/article-new/2017/11/crying-tears-of-joy-emoji-250x248.jpg"></div>
</section>

Answer 2

在您的定位中使用 vw 或 vh。例如，如果您使用：50%，它将获得父级的宽度，然后将其除以 2。如果您使用 vw（页面宽度）或 vh（页面高度），它将获取整个页面的宽度和高度。应该为你工作。请记住，您的定位也很重要。