在 div 上叠加图像

Question

我想设置图片叠加div。我想得到这个：

我使用 left 和 top 作为图像位置，但它不起作用，我没有得到异常结果。这就是我所做的:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    ### i use div to integrate image here ###
    div(
      img(src = "https://images-na.ssl-images-amazon.com/images/I/61Jigwd1kKL._AC_SL1500_.jpg", 
            style = "left: 16px; width: 10%; border-radius: 50%; top: -60px;")
      ),
    div(id = "id", style = "width: 500px; max-width: 100%; margin: 0 auto; padding: 20px;",
        wellPanel(
          tags$h2("my title", class = "text-center"),
          div(actionButton("btn1", "click here"))
          )
    )
  )
)

server <- function(input, output) { }

shinyApp(ui, server)

但我明白了：

一些帮助将不胜感激

Answer 1

在父级上使用 position: relative，在子级上使用 position: absolute。

div {
  width: 400px;
  height: 200px;
  background-color: lightcoral;
  margin: auto;
}

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: -15px;
  left: -15px;
  background-image: url('https://picsum.photos/200');
  width: 100px;
  height: 100px;
}

<div class="parent">
  <div class="child">
  </div>
</div>

Answer 2

您的 css 似乎不起作用的原因是 div 的 position 设置错误。

有五种位置设置：静态、相对、绝对、固定、粘滞。

所有元素默认都是position:static，top / left / z-index / 等对静态元素不起作用。

There are a few things that I generally change on every website project I do, so I add something like this to the top of every CSS page:

* {position:relative; box-sizing:border-box; margin:0; padding:0; }

This is called a CSS Reset, and many people have devised more complicated ones (as web standards evolve, CSS Resets also get adjusted).

在你的问题代码中，要理解的是position:absolute以及position: absolute和position: relative的区别。

这是a good description。文章中最重要的一句话是：请记住，这些值将相对于具有相对（或绝对）定位的下一个父元素。 换句话说，如果您指定 position:absolute; top:0; left:0; 某处，但忘记页面上的所有其他 div 仍处于默认状态 (position:static)，您的绝对 div 可能会跳到页面顶部并成为 top:0; left:0;脱身！通常，您要确保父级 div（容器）不仍然是 position: static.

我不会做演示，因为 Lundstromski 的回答在这方面做得很好。

在 div 上叠加图像

Overlay image on div

html

css

r

shiny

shinydashboard