1

假设我有这样的情况：

在此处输入图像描述

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

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

我需要这个设置：

在此处输入图像描述

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

3 回答 3

3

所以我已经添加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;这样它就可以存在了。

于 2016-06-23T17:23:33.687 回答
3

面板上的相对。徽标顶部的绝对值：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>

于 2016-06-23T17:24:08.337 回答
1

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

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

绝对

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

查看有关职位的更多信息

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

于 2016-06-23T17:25:50.843 回答