程序猿小白成長之路[定位]

定位

1-1在 CSS 中使用 position 屬性實現網頁的定位技術，他有4個值：
static 是position屬性的默認值，標籤會顯示在正常的文檔流中
relative
absolute
fixed
1-2除了 static以外，使用另外3個值能夠讓一個標籤變成定位元素
當一個標籤被定位以後，你就能夠使用CSS的top、 right、bottom、left四個屬性精確控制標籤在HTML文檔中的位置，
利用這些定位屬性你能夠在HTML文檔中任意擺放一個標籤的位置。

2-1relative 相對定位
將position的值設爲: relative;時：
標籤顯示在正常的文檔流中
其餘元素的位置不受影響
能夠使用top、right、bottom和left這些定位屬性，使這個標籤相對於原來的位置偏移顯示

3-1absolute 絕對定位
將position的值設爲: absolute;時：
其餘元素忽略絕對定位元素
標籤不顯示在正常的文檔流中
使用top、right、bottom和left屬性對元素定位

3-2當咱們將一個標籤設置爲絕對定位的時候：
默認狀況下絕對定位是以整個瀏覽器爲基準進行絕對定位
除非他有一個父元素是定位元素，除了static之外

4-1固定定位 fixed
不管用戶怎樣拖拽瀏覽器上的滾動條這個區域都不會跟着移動

5-1定位元素的先後位置： z-index
若是咱們沒有爲他們設置 z-index
或者爲他們設置了相同的 z-index屬性
那麼在html文件中後出現的標籤將會覆蓋前面的標籤
5-2z-index屬性只能用在定位元素上面
記住，若是你不想移動一個元素的位置
只想讓他變成定位元素
那麼就使用position：relative；

 

任務：用相對定位和絕對定位的技術添加大背景圖和小背景圖和一些說明文字
文字背景有透明度
給登陸條設置固定定位屬性
拖動瀏覽器的滾動條，登陸條會一直停留在在右上方，具備一個有透明度的背景
添加2張圖片在主頁背景中
步驟
1-1 把 main-content的內容用新的div替換掉
1-2主頁的圖片盒子div.home_imgbox
1-3添加子div.info
1-4再加一個姿姿div.info_wrap
1-5wrap:是包裹的意思，包裹一個圖片或文字
1-6再子子div中建立h3標籤，再h3標籤中建立p標籤，給p標籤添加內容

2-1在CSS中爲home_imgbox 的內容添加那張最大的背景圖片，看圖片寬100%和高、背景圖片background: url 左右上下居中居中
沒有平鋪
2-1把文字絕對定位 定位在頁面下方位置
home_imgbox最外層的盒子 position：relative；

home_imgbox.info 有一個絕對定位的特性 position：absolute；
顯示在上面那個盒子的下方：那就添加bottom 0像素
再定義一個left 0像素 寬度是整個瀏覽器的寬度100% 高度200 背景顏色background-color rgba(0,0,0,0.75)a表明透明度，
稍微有點透明的意思

2-2添加一個小圖片
home_imgbox.info_wrap
添加背景圖片background url() 左側0上下居中 不平鋪no-repeat
寬670 高200 居中顯示在底部：margin：0 auto;auto 居中顯示的意思

讓文字靠右一點
左側補白 padding-left 至少270像素，若是想要文字與圖片有點距離，能夠設置爲320像素

3-1把h3標題文字大小改一下
home_imgbox.info_wrap .h3:
顏色 #ffffff 字體大小font-size:32 標題粗體顯示font-weight bold 高是44像素 border 是0像素

4-1定義p標籤的顏色白色color#ffffff 字體大小font-size14 行間距light-weight 24 頂部補白padding-top6像素

5-1設置登陸條爲固定定位元素
把原來登陸條的css刪掉，添加position：fixed 屬性
而後顯示在頁面右上角，right 30 top10像素 背景顏色：background-color 有透明都的背景顏色rgba（138, 32, 10, 0.74)
10像素的補白padding 10

登陸區域顯示在背景下面，如何讓他浮在背景什麼呢？
那就爲他添加一個 z-index屬性就能夠了，z-index： 99；