固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
當(dāng)元素的position屬性設(shè)置fixed時(shí)，則開啟了元素的固定定位
固定定位也是一種絕對(duì)定位范抓，它的大部分特點(diǎn)都和絕對(duì)定位一樣
不同的是：
固定定位永遠(yuǎn)都會(huì)相對(duì)于瀏覽器窗口進(jìn)行定位
固定定位會(huì)固定在瀏覽器窗口某個(gè)位置考蕾，不會(huì)隨滾動(dòng)條滾動(dòng)
IE6不支持固定定位
*/
position: fixed;
left: 0px;
top: 0px;
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body style="height: 5000px;">
<div class="box1"></div>
<div class="box4" style="width: 300px; height: 300px; background-color: orange; position: relative;">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
元素的層級(jí)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的層級(jí)</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
z-index: 2;
opacity: 0.5;
filter: alpha(opacity=50);
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*開啟絕對(duì)定位*/
position: absolute;
/*設(shè)置偏移量*/
top: 100px;
left: 100px;
/*
如果定位元素的層級(jí)是一樣所森，則下邊的元素會(huì)蓋住上邊的
通過(guò)z-index屬性可以用來(lái)設(shè)置元素的層級(jí)
可以為z-index指定一個(gè)正整數(shù)作為值，該值將會(huì)作為當(dāng)前元素的層級(jí)不见，層級(jí)越高斑鼻，越優(yōu)先顯示
對(duì)于沒有開啟定位的元素不能使用z-index
*/
z-index: 25;
opacity: 0.5;
filter: alpha(opacity=50);
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
/*position: relative;
z-index: 3;*/
position: absolute;
top: 200px;
left: 200px;
z-index: 30;
/*
設(shè)置元素的透明背景
opacity可以用來(lái)設(shè)置元素背景的透明屈雄，它需要一個(gè)0-1之間的值
0 表示完全透明
1 表示完全不透明
0.5 表示半透明
*/
opacity: 0.5;
/*
opacity屬性在IE8及以下的瀏覽器中不支持
IE8及以下的瀏覽器需要使用如下屬性代替
alpha(opacity=透明度)
透明度泊愧，需要一個(gè)0-100之間的值
0 表示完全透明
100 表示完全不透明
50 半透明
這種方式支持IE6伊磺，但是這種效果在IE Tester中無(wú)法測(cè)試
*/
filter: alpha(opacity=50);
}
.box4{
width: 200px;
height: 200px;
background-color: orange;
/*開啟相對(duì)定位*/
position: relative;
/*父元素的層級(jí)再高，也不會(huì)蓋住子元素*/
z-index: 20;
top: 500px;
}
.box5{
width: 100px;
height: 100px;
background-color: skyblue;
/*開啟絕對(duì)定位*/
position: absolute;
z-index: 10;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4">
<div class="box5"></div>
</div>
</body>
</html>
背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景</title>
<style type="text/css">
.box1{
width: 1024px;
height: 724px;
margin: 0 auto;
/*設(shè)置背景樣式*/
background-color: #bfa;
/*
使用background-image來(lái)設(shè)置背景圖片
語(yǔ)法：background-image:url(相對(duì)路徑);
- 如果背景圖片大于元素删咱，默認(rèn)會(huì)顯示圖片的左上角
- 如果背景圖片和元素一樣大屑埋，則會(huì)將背景圖片全部顯示
- 如果背景圖片小于元素大小，則會(huì)默認(rèn)將背景圖片平鋪以充滿元素
可以同時(shí)為一個(gè)元素指定背景顏色和背景圖片腋腮，這樣背景顏色將會(huì)作為背景圖片的底色
一般情況下設(shè)置背景圖片時(shí)都會(huì)同時(shí)指定一個(gè)背景顏色
*/
background-image: url(img/1.png);
/*
background-repeat用于設(shè)置背景圖片的重復(fù)方式
可選值：
repeat雀彼，默認(rèn)值壤蚜，背景圖片會(huì)雙方向重復(fù)（平鋪）
no-repeat即寡，背景圖片不會(huì)重復(fù)，有多大就顯示多大
repeat-x袜刷， 背景圖片沿水平方向重復(fù)
repeat-y聪富，背景圖片沿垂直方向重復(fù)
*/
background-repeat: repeat-y;
}
</style>
<!-- <link rel="stylesheet" type="text/css" href="css/bgstyle.css"> -->
</head>
<body>
<div class="box1"></div>
</body>
</html>
背景偏移與定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景偏移與定位</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
/*width: 500px;*/
height: 500px;
margin: 0 auto;
/*設(shè)置一個(gè)背景顏色*/
background-color: #bfa;
/*設(shè)置一個(gè)背景圖片*/
background-image: url(img/4.png);
/*設(shè)置圖片不重復(fù)*/
background-repeat: no-repeat;
/*
背景圖片默認(rèn)是貼著元素的左上角顯示
通過(guò)background-position可以調(diào)整背景圖片在元素中的位置
可選值：
該屬性可以使用 top right left bottom center中的兩個(gè)值來(lái)指定一個(gè)背景圖片的位置
top left 左上
bottom right 右下
如果只給出一個(gè)值，則第二個(gè)值默認(rèn)是center
也可以直接指定兩個(gè)偏移量
第一個(gè)值是水平偏移量
- 如果指定的是一個(gè)正值著蟹，則圖片會(huì)向右移動(dòng)指定的像素
- 如果指定的是一個(gè)負(fù)值墩蔓，則圖片會(huì)向左移動(dòng)指定的像素
第二個(gè)是垂直偏移量
- 如果指定的是一個(gè)正值，則圖片會(huì)向下移動(dòng)指定的像素
- 如果指定的是一個(gè)負(fù)值萧豆，則圖片會(huì)向上移動(dòng)指定的像素
*/
/*background-position: -50px -50px;*/
background-attachment: fixed;
}
body{
height: 5000px;
background-image: url(img/3.png);
background-repeat: no-repeat;
/*
background-attachment用來(lái)設(shè)置背景圖片是否隨頁(yè)面一起滾動(dòng)
可選值：
scroll奸披，默認(rèn)值，背景圖片隨著窗口滾動(dòng)
fixed涮雷，背景圖片會(huì)固定在某一位置阵面，不隨頁(yè)面滾動(dòng)
不隨窗口滾動(dòng)的圖片，我們一般都是設(shè)置給body洪鸭，而不設(shè)置給其他元素
*/
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
背景固定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景固定</title>
<style type="text/css">
body{
height: 5000px;
background-image: url(img/2.jpg);
background-repeat: no-repeat;
background-position: center;
/*
當(dāng)背景圖片的background-attachment設(shè)置為fixed時(shí)样刷，
背景圖片的定位永遠(yuǎn)相對(duì)于瀏覽器的窗口
*/
background-attachment: fixed;
}
</style>
</head>
<body>
<p>
在我的后園，可以看見墻外有兩株樹览爵，一株是棗樹置鼻，還有一株也是棗樹。 這上面的夜的天空蜓竹，奇怪而高箕母，我生平?jīng)]有見過(guò)這樣奇怪而高的天空。他仿佛要離開人間而去俱济，使人們仰面不再看見嘶是。然而現(xiàn)在卻非常之藍(lán)，閃閃地?著幾十個(gè)星星的眼姨蝴，冷眼俊啼。他的口角上現(xiàn)出微笑，似乎自以為大有深意左医，而將繁霜灑在我的園里的野花草上授帕。 我不知道那些花草真叫什么名字同木，人們叫他們什么名字。我記得有一種開過(guò)極細(xì)小的粉紅花跛十，現(xiàn)在還開著彤路，但是更極細(xì)小了，她在冷的夜氣中芥映，瑟縮地做夢(mèng)洲尊，夢(mèng)見春的到來(lái)，夢(mèng)見秋的到來(lái)奈偏，夢(mèng)見瘦的詩(shī)人將眼淚擦在她最末的花瓣上坞嘀，告訴她秋雖然來(lái)，冬雖然來(lái)惊来，而此后接著還是春丽涩，蝴蝶亂飛，蜜蜂都唱起春詞來(lái)了裁蚁。她于是一笑矢渊，雖然顏色凍得紅慘慘地，仍然瑟縮著枉证。 棗樹矮男，他們簡(jiǎn)直落盡了葉子。
</p>
<p>
在我的后園室谚，可以看見墻外有兩株樹毡鉴，一株是棗樹，還有一株也是棗樹舞萄。 這上面的夜的天空眨补，奇怪而高，我生平?jīng)]有見過(guò)這樣奇怪而高的天空倒脓。他仿佛要離開人間而去撑螺，使人們仰面不再看見。然而現(xiàn)在卻非常之藍(lán)，閃閃地?著幾十個(gè)星星的眼，冷眼撮弧。他的口角上現(xiàn)出微笑，似乎自以為大有深意
</p>
<p>
在我的后園线婚，可以看見墻外有兩株樹，一株是棗樹盆均，還有一株也是棗樹塞弊。 這上面的夜的天空，奇怪而高，我生平?jīng)]有見過(guò)這樣奇怪而高的天空游沿。他仿佛要離開人間而去饰抒，使人們仰面不再看見。然而現(xiàn)在卻非常之藍(lán)诀黍，閃閃地?著幾十個(gè)星星的眼袋坑，冷眼。他的口角上現(xiàn)出微笑眯勾，似乎自以為大有深意枣宫，
</p>
</body>
</html>
