CSS - 定位器
使用說明
static 靜態
relative 相對
absolute絕對-對DOM的上層為基準。若沒有以下設定會以頁面為基準
relative
absolute
fixed
fixed固定
定位與深度
@charset "utf-8";
.box-out,
.box-in {
padding: 10px;
}
.box-out{
margin: 20px auto;
width: 800px;
height: 500px;
background-color: pink;
position: relative;
}
.box-in-1 {
/* 我是子層的哥哥 */
/* 若box-out不加relative 則 absolute + top + left 為網頁為基準 */
top: 0;
left: 100px;
width: 200px;
height: 300px;
background-color: yellowgreen;
z-index: 2;
}
.box-in-2 {
/* 我是子層的弟弟 */
z-index: 1;
top:250px;
left: 200px;
width: 300px;
height: 100px;
background-color: brown;
}
.box-in{
position: absolute;
}
<body>
<div class="box-out">
我是父層
<div class="box-in box-in-1">我是子層的哥哥</div>
<div class="box-in box-in-2">我是子層的弟弟</div>
</div>
</body>
固定廣告
@charset "utf-8";
.text-center {
text-align: center;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body,
button {
font-family: Arial, Helvetica, "微軟正黑體", sans-serif;
}
.wrap {
width: 960px;
margin-left: auto;
margin-right: auto;
}
.dialog__head {
border-bottom: solid 1px #ddd;
}
.dialog__body,
.dialog__foot {
padding: 15px;
}
.dialog__title {
margin: 0;
padding: 15px;
width: 100%;
font-size: 26px;
text-align: center;
}
.dialog__desc {
margin: 0;
color: #666;
}
.dialog__head .btn__inner {
position: absolute;
right: 15px;
top: 15px;
}
.dialog__foot .btn__inner {
text-align: center;
}
.btn {
line-height: 1;
background-color: transparent;
border: none;
}
.btn-close {
font-size: 25px;
color: #ccc;
}
.btn-peace,
.btn-cancel {
padding: 10px 20px;
margin-left: 5px;
margin-right: 5px;
font-size: 16px;
border-radius: 3px;
}
.btn-peace {
color: #fff;
background-color: #228be6;
}
.btn-cancel {
color: #000;
background-color: #ddd;
}
.ovl-dark {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
}
.dialog {
/*
example 1
position: fixed;
left:50%;
top:50%;
margin-top: -200px;
margin-left: -91px;
*/
/*
example 2
position: fixed;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
*/
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
position: fixed;
width: 400px;
height: 183px;
background-color: #fff;
}
<div class="dialog">
<div class="dialog__head clearFix">
<h6 class="dialog__title">系統訊息</h6>
<div class="btn__inner">
<button class="btn btn-close" type="button"><i class="fas fa-times"></i></button>
</div>
</div>
<div class="dialog__body text-center">
<p class="dialog__desc">是否要加入我們的學習計畫?</p>
</div>
<div class="dialog__foot">
<div class="btn__inner">
<button class="btn btn-peace" type="button">確定</button>
<button class="btn btn-cancel" type="button">取消</button>
</div>
</div>
</div>
Dropdown
<div class="container mx-auto navi">
<ul class="navi__ls">
<li class="navi__item">
<a href="javascript:;">政治</a>
<ul>
<li><a href="javascript:;">政治首頁</a></li>
<li><a href="javascript:;">政治影音</a></li>
<li><a href="javascript:;">全民立法院</a></li>
<li><a href="javascript:;">風向台灣</a></li>
</ul>
</li>
<li class="navi__item">
<a href="javascript:;">財經</a>
<ul>
<li><a href="javascript:;">財經首頁</a></li>
<li><a href="javascript:;">股市匯市</a></li>
<li><a href="javascript:;">房地產</a></li>
<li><a href="javascript:;">產業動態</a></li>
<li><a href="javascript:;">理財就業</a></li>
<li><a href="javascript:;">財經影音</a></li>
<li><a href="javascript:;">網路商機</a></li>
<li><a href="javascript:;">股神巴菲特</a></li>
<li><a href="javascript:;">逐夢台灣</a></li>
</ul>
</li>
<li class="navi__item">
<a href="javascript:;">論壇</a>
<ul>
<li><a href="javascript:;">論壇首頁</a></li>
<li><a href="javascript:;">政事觀察站</a></li>
<li><a href="javascript:;">職場精力湯</a></li>
<li><a href="javascript:;">愛的培養皿</a></li>
<li><a href="javascript:;">健康大補帖</a></li>
</ul>
</li>
<li class="navi__item">
<a href="javascript:;">娛樂</a>
<ul>
<li><a href="javascript:;">娛樂首頁</a></li>
<li><a href="javascript:;">藝人動態</a></li>
<li><a href="javascript:;">電影戲劇</a></li>
<li><a href="javascript:;">音樂</a></li>
<li><a href="javascript:;">日韓</a></li>
<li><a href="javascript:;">相信My音樂</a></li>
</ul>
</li>
<li class="navi__item">
<a href="javascript:;">運動</a>
<ul>
<li><a href="javascript:;">運動首頁</a></li>
<li><a href="javascript:;">棒球</a></li>
<li><a href="javascript:;">籃球</a></li>
<li><a href="javascript:;">高爾夫</a></li>
<li><a href="javascript:;">網球</a></li>
</ul>
</li>
<li class="navi__item">
<a href="javascript:;">社會地方</a>
<ul>
<li><a href="javascript:;">社會地方首頁</a></li>
<li><a href="javascript:;">大台北</a></li>
<li><a href="javascript:;">北台灣</a></li>
<li><a href="javascript:;">中部</a></li>
<li><a href="javascript:;">離島</a></li>
<li><a href="javascript:;">南台灣</a></li>
<li><a href="javascript:;">東台灣</a></li>
</ul>
</li>
<li class="navi__item">
<a href="javascript:;">國際</a>
<ul>
<li><a href="javascript:;">國際首頁</a></li>
<li><a href="javascript:;">亞澳</a></li>
<li><a href="javascript:;">中港澳</a></li>
</ul>
</li>
</ul>
</div>
@charset "utf-8";
.container {
width: 1050px;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-size: 15px;
font-family: Arial, "微軟正黑體";
background-color: #f6f6f6;
}
.navi,
.content {
margin-top: 15px;
margin-bottom: 15px;
}
.content {
background-color: #eee;
border: solid 1px transparent;
}
.content p {
margin: 15px;
line-height: 1.5em;
}
.navi{
height: 40px;
}
.navi__item{
float: left;
position: relative;
}
.navi__item >a{
text-align: center;
}
.navi__item a{
display: block;
width: 150px;
padding: 10px;
color: #fff;
text-decoration: none;
background-color: #1ab394;
}
.navi__item ul{
display: none;
position: absolute;
top:100%;
left: 0;
}
.navi__item a:hover{
background-color: #23d4b0;
}
.navi__item:hover ul{
display: block;
}
Last updated