在 div 上叠加图像

如何解决在 div 上叠加图像

我想设置图像覆盖一个 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)

但我明白了：

希望得到一些帮助

解决方法

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

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

默认情况下所有元素都是 position:static，并且 top / left / z-index / 等不适用于静态元素。

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

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

这称为 CSS Reset，许多人设计了更复杂的方法（随着网络标准的发展，CSS 重置也会得到调整）。

在您的问题代码中，需要理解的是 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 的回答在这方面做得很好。

,

在父节点上使用位置：相对，在子节点上使用位置：绝对。

tkinter.Button(root,command=a)

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;
}