相对定位和绝对定位。强制标志移动到角落答案

【问题标题】：Relative and absolute positioning. Force a logo move to the corner相对定位和绝对定位。强制标志移动到角落
【发布时间】：2016-06-24 01:33:16
【问题描述】：

假设我有这样的情况：

您可以看到几个主要部分：

面板（红色边框）
图片
徽标
标题

我需要这个设置：

所以徽标需要起床。通常，每次我尝试制作图像absolute 和徽标relative，然后将其浮动到右侧它就可以了，但是我失去了也位于图像下方的标题。

而且我不能使标题相对并以某种价值从顶部推送它，因为图像是响应式的并且将其更改为height。

这是我正在使用的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <style>
        .body {
            width: 100%;
        }

        .panel {
            border: 1px solid red;
            background-color: blue;
            margin: 50px;
        }
        img {
            width: 100%;
        }

        .logo {
            background-color: red;
            border: 1px solid yellow;
            width: 100px;

        }
    </style>
</head>
<body>

    <div class="panel">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVxPtnNvc1ZwknRSdJZIPjrmUHitXdUU_-TT3wuIF-mWND6sXV" class="img-responsive" alt="picture nature">
        <div class="logo">
            I'm a logo
        </div>
        <h1>I'm a title, hello</h1>
    </div>

</body>
</html>

【问题讨论】：

请检查此网址。 codepen.io/nehemc/pen/YWpmMb

标签： html css twitter-bootstrap css-position responsive-images

【解决方案1】：

所以我在容器中添加了position:relative，在徽标中添加了position:absolute; top:0; right:0

.body {
    width: 100%;
}
.panel {
    border: 1px solid red;
    background-color: blue;
    margin: 50px;
    position:relative;
}
img {
    width: 100%;
    height: 200px;
}
.logo {
    background-color: red;
    border: 1px solid yellow;
    width: 100px;
    position:absolute;
    top:0;
    right:0;
}

https://jsfiddle.net/3gusz58x/

由于图像没有移动并且需要更改其尺寸，您可以使用absolute 将徽标移动到您需要的任何位置。如果你让它成为绝对的，你需要给它的容器（或者至少是你希望它被“包含”在其中的容器）position:relative;，这样它就可以存在了。

【讨论】：

@DenisRozimovschii，你明白了！

【解决方案2】：

面板上的亲戚。徽标顶部的绝对值：0，右侧：0 ntgCleaner 快了 34 秒，所以请接受他的回答。

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <style>
        .body {
            width: 100%;
        }

        .panel {
            position: relative;
            border: 1px solid red;
            background-color: blue;
            margin: 50px;
        }
        img {
            width: 100%;
            height: 200px;
        }

        .logo {
            position: absolute;
            top:0;
            right: 0;
            background-color: red;
            border: 1px solid yellow;
            width: 100px;

        }
    </style>
</head>
<body>

    <div class="panel">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVxPtnNvc1ZwknRSdJZIPjrmUHitXdUU_-TT3wuIF-mWND6sXV" class="img-responsive" alt="picture nature">
        <div class="logo">
            I'm a logo
        </div>
        <h1>I'm a title, hello</h1>
    </div>

</body>
</html>

【讨论】：

哈哈哈，喜欢就采纳吧！
那么，您将图像的位置设置为相对于最近的相对父级？
@DenisRozimovschii 你不需要对图像做任何事情。如果要移动徽标，请更改该位置类型
徽标的位置*。错了。
Relative 是相对于自身的位置。所以如果你说do top: -30px，元素会向上移动，因为相对元素的原始位置是top: 0, left: 0;绝对是相对于其父级的，如果该父级不是静态的（即它是固定的、绝对的、相对的）。

【解决方案3】：

您需要在父级.panel 中使用position:relative 并在.logo 中使用position:absolute 和top\ right 设置为0

如果您的父项中没有 position:relative，并且使用 position:absolute 该元素将退出有关 DOM 的流程

绝对

不要为元素留出空间。相反，将其定位在相对于其最近定位的祖先的指定位置，如果任何，或以其他方式相对于初始包含块。绝对地定位框可以有边距，并且它们不会折叠任何其他边距。

查看更多关于position的信息

.body {
  width: 100%;
}
.panel {
  position: relative;
  border: 1px solid red;
  background-color: blue;
  margin: 50px
}
img {
  width: 100%
}
.logo {
  position: absolute;
  top: 0;
  right: 0;
  background-color: red;
  border: 1px solid yellow;
  width: 100px
}

<div class="panel">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVxPtnNvc1ZwknRSdJZIPjrmUHitXdUU_-TT3wuIF-mWND6sXV" class="img-responsive" alt="picture nature">
  <div class="logo">
    I'm a logo
  </div>
  <h1>I'm a title, hello</h1>
</div>

【讨论】：