在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

你的CSS似乎不起作用的原因是因为div有错误的

position

设置。

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

所有元素默认为

position:static

，

top

/

left

/

z-index

/ 等不适用于静态元素。

我通常会在我所做的每个网站项目中更改一些内容，因此我在每个 CSS 页面的顶部添加类似的内容：

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

这称为 CSS Reset，许多人设计了更复杂的（随着网络标准的发展，CSS Resets 也会进行调整）。

在您的问题代码中，需要理解的是

position:absolute

以及

position: absolute

和

position: relative

之间的区别。

这是一个很好的描述。本文中最重要的一句话是：记住这些值将相对于具有相对（或绝对）定位的下一个父元素。换句话说，如果您在某处指定了

position:absolute; top:0; left:0;

但忘记了所有其他 div页面上仍然处于默认状态（

position:static

），您的绝对 div 可能会跳到页面顶部并

top:0; left:0;

离开正文！一般来说，您需要确保父 div（容器）不是静止不动

position: static

。

我不会做演示，因为 Lundstromski 的答案已经做得很好了。

Answer 2

在父级上使用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 3

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>