相对和绝对定位。强制徽标移动到角落

Question

假设我有这样的情况：

可以看到几个主要部分：

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

我需要这个设置：

所以标志需要起来。通常，每次我尝试制作图像 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>

Answer 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 将徽标移动到您需要的任何位置。如果你让它成为绝对的，你需要给它的容器（或者至少你希望它在 'contained' 中的容器）position:relative; 所以它有一个地方。

Answer 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>

Answer 3

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

如果您在父级中没有 position:relative，并且使用 position:absolute 该元素将退出关于 DOM

的流程

absolute

Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.

查看有关 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>

相对和绝对定位。强制徽标移动到角落

Relative and absolute positioning. Force a logo move to the corner

html

css

css-position

twitter-bootstrap

responsive-images