无论屏幕大小如何，如何将徽标定位在它下方的div上方

Question

我需要在下方的div上方放置一个徽标，如下图所示，我似乎无法完美。无论屏幕大小或浏览器大小如何，即使在调整浏览器大小的过程中也需要一半。

我正在使用这样的定位

.site-icon {
  width: 15%;
  top: 6%;
  right: 11.9%;
}

部分的HTML

<div class="container-fluid page-container-2">
  <h1 class="page-title-2 small-header">
   <a href="/">SITE TITLE</a>
  </h1>

  <!-- This is the icon -->
  <a href="/"><img class="site-icon" src="/resources/img/icon.png" alt="site_title"/></a>

  <!-- this is the div holding the banner image -->
  <div class="col-xs-12 banner-image-container-2 no-pad" style="background: url({% resource banner_image['path'] %}) no-repeat center center;background-size:cover;"></div>

.... rest of the page ....

但是当浏览器垂直或水平缩小时它失败了，我只是无法弄清楚如何用css实现这个目标？

Answer 1

好吧，当我写下你的答案时，你的问题中没有任何HTML代码，所以我提出了自己的问题 - 但这也应该是可以理解为你的问题的答案......（不会现在改变了）

最重要的是组合position: relative（对于父对象）和`position absoute（对于子元素），加上宽度，高度和位置设置，尤其是对于孩子。请查看下面代码段中的设置。

.x {
  position: relative;
  top: 70px;
  height: 160px;
  background: #fa0;
}

.site-icon {
  position: absolute;
  width: 15%;
  height: 50%;
  top: 0;
  right: 12%;
  transform: translateY(-50%);
  background: #0fa;
}

<div class="x">
  <div class="site-icon"></div>
</div>

Answer 2

您可以做的就是拥有一个absolute容器，然后以这种方式定位徽标，而不是以这种方式使用定位。这种技术不会取决于徽标的大小：

.header {position: relative; margin: 100px 0 0;}
.logo-container {position: absolute; right: 0;}
.logo {position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.container {background-color: #eef; border: 1px solid #ccf; margin-bottom: 25px; padding-top: 50px;}

<div class="header">
  <div class="logo-container">
    <div class="logo">
      <img src="https://placehold.it/100x75?text=Logo" alt="" />
    </div>
  </div>
</div>
<div class="container">
  <p>Rest of Page. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit ducimus, porro atque laboriosam. Architecto similique, explicabo aut iste ipsam magnam labore qui omnis eius vitae, nihil distinctio, molestias dolore quisquam!</p>
</div>

<div class="header">
  <div class="logo-container">
    <div class="logo">
      <img src="https://placehold.it/100?text=Logo" alt="" />
    </div>
  </div>
</div>
<div class="container">
  <p>Rest of Page. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nesciunt velit nam sapiente, sint autem voluptas a laborum ad, molestias delectus nobis repellendus assumenda mollitia harum id nisi expedita ut.</p>
</div>

Answer 3

＆＃13;

＆＃13;

.header {
    height: 500px;
    width: 100%;
    margin-bottom:300px;
}

.icone {
    width: 15%;
    top: -35%;
    position: absolute;
    height: 40%;
    right: 11.9%;
    background-color: #d9eff4;
    min-width: 200px;
    min-height: 200px;
}.header-container {
    position: absolute;
    background-color: #f6a68a;
    bottom: 0px;
    height: 70%;
    width: 100%;
}
@media only screen and (max-width: 990px) {
    .icone {
    width: 40%;
    height: 40%;}

}
@media only screen and (max-width:440px) {
    .icone {
    width: 50%;
    height: 50%;}

}
@media only screen and (max-width:320px) {
    .icone {
    width: 70%;
    height: 40%;}

}

＆＃13;

<div class="header">
<div class="header-container">
<div class="icone"></div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

试试这个