在 div 上叠加图像答案

【问题标题】：Overlay image on div在 div 上叠加图像
【发布时间】：2023-03-07 19:45:02
【问题描述】：

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

但我明白了：

我们将不胜感激

【问题讨论】：

位置：相对于父div
正如 termaniafif 所说，img 和 h2 在同一个容器中的纯 HTML 示例：<div id="id" style="width: 500px; max-width: 100%; margin: 5em auto; padding: 20px;position:relative;border:solid;"> <img src="https://images-na.ssl-images-amazon.com/images/I/61Jigwd1kKL._AC_SL1500_.jpg" style="left: -16px; width: 10%; border-radius: 50%; top: -30px;position:absolute"> <h2 class="text-center">my title</h2><button> click here</button> </div>

标签： html css r shiny shinydashboard

【解决方案1】：

您的 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 的回答在这方面做得很好。

【讨论】：

【解决方案2】：

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

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>

【讨论】：