特点：
1、有定位属性的元素谁在上面，比的是Z-index值，谁的值大，谁就在上面
2、有定位属性的元素默认层级是0，如果层级一样，则后来者居上。
3、只有 有定位属性的元素才有层级的概念
4、只有亲兄弟元素才能比较层级
例子：
比较前
比较后
比较后为什么还是y在上面吗？不是y先进行定位的吗？
其实这个跟那个元素先定位没有关系，只跟你定义元素的先后有关系，
虽然你CSS没有写定位，可是层级是默认的
把x的层级定为2之后 请看效果
方法有以下几种1.你说的没有变化,可能是因为样式是应用表格上的缘故,如果是应用在<td class=title_main>最新文章</td>应该即可
2.单独给标题设置样式, 采用<span calss="title_1">标题</span>
CSS的样式代码如:
.title_main{font-size:12pxcolor:#f00line-height:20px}
样式解释:
font-size 表示字体大小, color 颜色, line-height表示行高,我这里设了20px, 这样就显得比较开阔,容易阅读,就和WORD 里面1.5倍行距比1倍行距容易阅读的道理一样. 因为浏览器默认字体是 宋体, 所以font-family:宋体 可以省略,如果是其他字体则需要这条.
如果是比较大的标题: 可以采用以下样式:
.title_main{font-size:20pxcolor:#f00line-height:30pxfont-weight:bold}
和上面的样式相比,这个字体扩大,行距加大,字体加粗.
3.给标题设置样式,其实还可以用<h1>标签
<h1>文章标题</h1>
说明:
<h1>(除了<h1>,还有<h2><h3><h4><h5><h6>) 这些是专门用于设置不同大小的代码, 其中这些代码默认值都是有加粗的,字体大小由<h1>到<h6>逐渐变小,字体颜色默认为黑色,当然,大小/粗细/颜色都能修改的.
比如设置<h1>样式,css样式代码如:
h1{font-size:12pxcolor:#f00line-height:20px}
注意,h1前面没有任何标点,这样的话,整张网页里面所有用过<h1>标签的都会应用这个样式. 和 .title_main 只有加了class="title_main" 才应用样式不同.
而且和 CLASS 类相比, <h1>更加简洁,如果样式设置一样
<span calss="title_1">标题</span> 和<h1>文章标题</h1> 效果是一样的.
CSS 还有其他许多功能, 你可以在DreamWeaver里一个个添加 尝试 /对比 ,很快就能基本掌握CSS 基础的设置了,当然,有些设置还是需要经验和实践才能运用的比较娴熟和简练的.
写一个简单的弹框
html:
<button onclick=""bombClick()" >点击弹框</button>
<div id="bombContain"></div>
<div id="bomb_div"></div>
css:
#bombContain{
z-index: 199412204822//z-index只有在定位元素上生效，默认值static是没有定位的
background-color:#000
opacity:0.6
top:0
left:0
width:100%
height:100%
position:fixed
display:none
}
#bomb_div{
z-index:199412204822
width:34%
height:450px
top:66px
left:36%
margin:0
padding:0
background-color:#fff
box-shadow:1px 1px 50px rgba(0,0,0,.3)
position:fixed
display:none
}
js:
function bombClick(){
$("#bombContain").css("display","block")
$("#bomb_div").css("display","block")
}
