div重疊不變形

時間 2019-11-24

標籤 div 重疊變形欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>div重疊 疊加實例 未排層疊順序 www.divcss5.com</title> 
<style> 
.div-relative{position:relative; color:#000; border:1px solid #000; width:500px; height:400px} 
.div-a{ position:absolute; left:30px; top:30px; background:#F00; width:200px; height:100px} 
/* css註釋說明： 背景爲紅色 */ 
.div-b{ position:absolute; left:50px; top:60px; background:#FF0; width:400px; height:200px} 
/* 背景爲黃色 */ 
.div-c{ position:absolute; left:80px; top:80px; background:#00F; width:300px; height:300px} 
/* DIV背景顏色爲藍色 */ 
</style> 
</head> 
<body> 
<div class="div-relative"> 
<div class="div-a">我背景爲紅色</div> 
<div class="div-b">我背景爲黃色</div> 
<div class="div-c">我背景爲藍色</div> 
</div> 
</body> 
</html>

相關標籤/搜索