其實很簡單，就是一個margin-top的問題，但是需要relative的定位方式才能懸在上面。

html部分

草帽的創新

聚集國內外優秀人才， 聚焦新技術及產品研究， 以開放互聯的理念， 驅動企業創新發展。

實現怎樣的創新

服務全國品牌用戶，實現多語言、全球化、全渠道、理想的電商自運營；打造數據標準化，服務標準化的云計算平臺，為云生態平臺提供堅實的基礎。

創新布局

戰略布局基礎云計算、電商云生態，科技大腦、大數據平臺四大科技創新方向，為實現草帽電商創新愿景不懈努力。

css

.intro {

height: 430px;

background-color: #FFFFFF;

.intro-container {

position: relative; /* 可以讓內容懸浮在圖片之上 static是position的默認屬性，元素會按正常的文檔流進行排序，不會受到top，bottom，left，right的影響。 */

margin:0 auto;

margin-top:-150px;

width: 1200px;

height: 400px;

//border: 1px solid red;

display: flex;

justify-content: space-between; /* 橫向中間自動空間 */

.intro-item {

width: 380px;

height: 400px;

background-color: #FFFFFF;

box-shadow:0px 13px 32px 0px rgba(0, 0, 0, 0.1);

.intro-item-icon {

margin:0 auto;

margin-top:80px;

width: 32px;

height: 32px;

//background-color: red;

}

.intro-item-title {

font-size: 24px;

font-weight: bold;

color:#222222;

text-align: center;

margin-top:24px;

}

.intro-item-content {

width: 300px;

margin: 0 auto;

margin-top:26px;

font-size: 18px;

line-height: 36px;

color: #666666;

}

}

}

}

總結

以上是生活随笔為你收集整理的前端实现图片悬浮_悬浮图片之上效果实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。