html - 我如何将 "stick"和对象或 div 放到另一个 div 的顶部？

Question

对于这个基本问题，我很抱歉。

我有一张图片想附加到 div 的右上角，但我不知道如何实现

这是问题的图片:

我想将“Flack”对象附加到白色 div 的右上角。

<div id="wrapper">
<object class="headerimage" data="{{ url_for('static', filename='images/flackH.svg') }}"></object>
  <div class="chatroom">
    <div id="contain">
      <div id="channels">
        <div class="list-group">
          <button class="list-group-item list-group-item-action active">General</button>
          {% for channel in channels %}
          <button class="list-group-item list-group-item-action">{{ channel }}</button>
          {% endfor %}
        </div>
        <div class="create-channel">
          <form class="channel-create">
              <div class="form-group">
                <input type="text" id="c" class="form-control" autocomplete="off" placeholder="Create a channel"></div>
          </form>
        </div>
      </div>
      <div id="chat">
        <ul id="messages">
          {% for dict in messages %}
            <li>{{dict.time}} - {{ dict.username }} : {{dict.message}}</li>
          {% endfor %}
        </ul>
        <div class="input">
          <form id="send-message">
              <div class="form-group">
                <input type="text" id="m" class="form-control" autofocus="true" autocomplete="off" placeholder="Send a message"></div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

我该怎么做？

Answer 1

您应该使用 CSS position 属性。

默认情况下，每个 HTML 元素的 position 设置为 static。您可以通过将元素的 position 属性设置为 absolute 来相对于其封闭的父元素定位元素。这将导致元素自动定位在其父元素的 x=0, y=0 处(即左上角)。然后，您可以使用 CSS 属性 top/right/bottom/left 移动它。

请注意，要使其正常工作，您还需要将父级的 position 属性从默认的 static 更改为 absolute 或 relative

在您的情况下，您需要将图像放入白色 div(我假设它是 ID 为“聊天”的那个)，并说明它应该根据其父级定位。

HTML

<div class="chatroom">
    <div id="contain">
    <div id="channels">
        <div class="list-group">
        <button class="list-group-item list-group-item-action active">General</button>
        {% for channel in channels %}
        <button class="list-group-item list-group-item-action">{{ channel }}</button>
        {% endfor %}
        </div>
        <div class="create-channel">
        <form class="channel-create">
            <div class="form-group">
                <input type="text" id="c" class="form-control" autocomplete="off" placeholder="Create a channel"></div>
        </form>
        </div>
    </div>
    <div id="chat">
        <object class="headerimage" data="{{ url_for('static', filename='images/flackH.svg') }}"></object>
        <ul id="messages">
        {% for dict in messages %}
            <li>{{dict.time}} - {{ dict.username }} : {{dict.message}}</li>
        {% endfor %}
        </ul>
        <div class="input">
        <form id="send-message">
            <div class="form-group">
                <input type="text" id="m" class="form-control" autofocus="true" autocomplete="off" placeholder="Send a message"></div>
        </form>
        </div>
    </div>
    </div>
</div>
</div>

CSS

#chat {
    position: relative;
    /* Without this change, the class `headerimage` below will try to position
    itself according to its first parent that is not `position:static`.
    Since it won't find any, it will position itself according to the `body`.

    You prevent that by setting its immediate parent's positon to relative or absolute*/
}

.headerimage {
    position: absolute;
    top: 0;
    right: 0;
    /* Give different values to top and right if you want some
    spacing from the borders */
}