MinIO 客戶端 MC 命令
阿新 • • 發佈：2022-05-07
css定位 position
可以實現圖片和元素重疊，浮動解決不了的事情
例如圖片的切換
-
絕對定位（脫離文件流 相對瀏覽器左上角）
-
相對定位（不脫離文件流 相對自身原始位置）
-
固定定位（脫離文件流 相對瀏覽器視窗，滾動也不改變）
-
設定z軸（）
絕對定位 absolute
脫離文件流
參照物預設的位置是瀏覽器的左上方或者父級元素是相對定位或者絕對定位的元素
<body> <div class="box">1</div> <div class="box pos">2</div> <div class="box">3</div> </body> .box{ width:100px; height:100px; background-color: red; border:3px solid green; } .pos{ /* 絕對定位 */ position:absolute; top:50px; left:50px; }
相對定位 relative
不脫離文件流
參照為是原始自己的位置
.pos{
/*相對定位*/
position:relative;
top:50px;
left:80px;
}
固定定位 fixed
脫離文件流
參照物預設的位置是瀏覽器的視窗
.pos{ /* 固定定位 */ position:fixed; top:50px; left:80px; }
fixed和absolute的區別是，
當瀏覽器的螢幕滾動時候，元素還是不變。類似返回頂部使用fixed body{
height:2000 px;
}
設定z軸 z-index
值是整數
當值為正整數的時候，越大越靠近使用者 z-index：9
預設的元素，不設定z-index ，預設為z-index：0
當值為負數是，-1，比預設的元素還後一層 z-index：-1
一般使用絕對定位的時候，父元素為相對定位，這樣可以相對父元素來定位
//預設 .pos{ /* 固定定位 */ position:fixed; top:50px; left:80px; } .pos3{ position:absolute; top:50px; left:100px; }
/* 想讓2在3上方 */
z-index: 9;
background-color: yellow;
/*3為-1的時候*/
z-index: -1;
background-color: blue;
案例
實現返回頂部的按鈕
//實現返回頂部的按鈕
<style>
/* 固定定位 */
.btn{
bottom:60px;
right:60px;
}
.help button{
position: fixed;
width: 48px;
height: 48px;
border-radius: 24px;
margin-top: 6px;
background-color: rgb(54, 180, 45);
border: 0px;
font-size: 12px;
color: aliceblue;
text-align: center;
}
.help .btn1{
bottom:200px;
right:60px;
}
.help .btn2{
bottom:256px;
right:60px;
}
.help .btn3{
bottom:312px;
right:60px;
}
</style>
</head>
<body>
<h1>hello word!</h1>
<h1>hello word!</h1>
<h1>hello word!</h1>
<h1>hello word!</h1>
<h1>hello word!</h1>
<h1>hello word!</h1>
<h1>hello word!</h1>
<h1>hello word!</h1>
<h1>hello word!</h1>
<h1>hello word!</h1>
<img src="../images/bannerroll (1).jpg" alt="">
<div class="help">
<button class="btn1">幫助</button>
<button class="btn2">評論</button>
<button class="btn3">舉報</button>
<button class="btn"><a href="#">返回頂部</a></button>
</div>
<!-- <a href="#">才是可以讓文件回到頂部-->
</body>
</html>
實現圖片上顯示數字列表的功能（還可以切換圖片的功能）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>實現圖片上顯示數字列表的功能</title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
}
.pic-container {
width: 300px;
margin: 50px auto;
border: 24px solid wheat;
border-radius: 16px;
position: relative;
overflow: hidden;
}
.pic {
width: 1500px;
display: flex;
transition: 0.4s;
}
img {
width: 300px;
}
ul {
list-style-type: none;
position: absolute;
bottom: 12px;
float: right;
right: 8px;
}
li {
font-size: 12px;
text-decoration: none;
width: 16px;
height: 16px;
background-color: #fff;
margin-left: 4px;
float: left;
text-align: center;
}
</style>
</head>
<body>
<div class="pic-container">
<div class="pic">
<img src="../images/bannerroll (5).jpg" alt="" />
<img src="../images/bannerroll (2).jpg" alt="" />
<img src="../images/bannerroll (4).jpg" alt="" />
<img src="../images/bannerroll (3).jpg" alt="" />
<img src="../images/bannerroll (1).jpg" alt="" />
</div>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script>
//繫結事件
// 讓點選就可以切換圖片
let imgList = [
"../images/bannerroll (5).jpg",
"../images/bannerroll (2).jpg",
"../images/bannerroll (4).jpg",
"../images/bannerroll (3).jpg",
"../images/bannerroll (1).jpg",
];
let pic = document.querySelector(".pic");
let btn = document.querySelectorAll("li");
let imgs = document.querySelectorAll("img");
for (let i in btn) {
btn[i].onclick = function () {
//讓圖片的橫向移動300px*第i張，
//加入translation：0.4s 有緩慢動的感覺
pic.style.transform = `translate(${i * -300}px)`;
};
}
</script>
</body>
</html>