iT邦幫忙

DAY 30
3

只是路過 HTML5 系列 第 30

●筆記CSS屬性-z-index和direction

  • 分享至 

  • xImage
  •  

*z-index 屬性決定元素重疊的順序

CSS 碼:

#redblock {
z-index: 1;
position:absolute;
width:80px;
height:100px;
top:20px;
left:20px;
background-color: #FF0000;
}

#pinkblock {
z-index: 2;
position: absolute;
width:100px;
height:80px;
top:50px;
left:50px;
border: 1px solid #FFF;
background-color: #FF00FF;
}

HTML 碼:

<div id="redblock"></div>
<div id="pinkblock"></div>

結果pinkblock會蓋在redblock上,因為pinkblock是z-index: 2,
而redblock是z-index: 1。

*direction 屬性設定文字的置向

左為 'ltr' 右為 'rtl'

置左:

p {
direction:ltr;
}

text-align 屬性設定文字對齊

left: 靠左對齊
right: 靠右對齊
center: 向中間對齊
justified: 左右對齊

靠左對齊:

p {
text-align:left;
}

資料來源:
CSS的由來與基本嘗試建立「新手必讀」
http://6ala.com/teachingfiles/239

CSS: Specificity Wars
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

CSS選擇器的權重詳解
http://www.eduyo.com/web/css/360.html

如何理解Css Specificity
http://www.cnblogs.com/yuzhongwusan/archive/2010/07/16/1779055.html

征服高級CSS選擇器
http://www.qianduan.net/taming-advanced-css-selectors.html


上一篇
●HTML、CSS、JavaScript如何註解?
系列文
只是路過 HTML5 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言