在 div 上疊加圖像

Question

我想設置圖像覆蓋一個div。 我想得到這個：

我使用left和top圖像 position 但它不起作用，我沒有得到例外結果。 這就是我所做的：

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，相對、絕對、固定、粘性。

默認情況下，所有元素都是position:static ，並且top / left / z-index / etc 不適用於 static 元素。

在我所做的每個網站項目中，我通常都會更改一些內容，因此我在每個 CSS 頁面的頂部添加了這樣的內容：

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

這稱為CSS 重置，許多人設計了更復雜的重置（隨着 web 標准的發展，CSS 重置也得到調整）。

在您的問題代碼中，要理解的是position:absolute和position: absolute和position: relative之間的區別。

這是一個很好的描述。 文章中最重要的一句話是：記住這些值將相對於具有相對（或絕對）定位的下一個父元素。 換句話說，如果你指定position:absolute; top:0; left:0; position:absolute; top:0; left:0; 某處但忘記頁面上的所有其他 div 仍處於默認狀態（ position:static ），您的絕對 div 可以跳轉到頁面頂部並成為top:0; left:0; top:0; left:0; 關閉身體，通常，您要確保父 div（容器）仍然不是position: static 。

我不會做演示，因為 Lundstromski 的回答在這方面做得很好。

Answer 2

在父節點上使用 position：相對，在子節點上使用 position：絕對。

 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>