問題的提出
今天又遇到了一個塊內(nèi)元素定位的問題嵌屎，具體的問題是這個樣子的誉裆，如圖：
如圖中紅線畫出的部分顿颅，經(jīng)分析，這屬于塊內(nèi)元素定位的問題足丢。關(guān)于定位問題粱腻，就要提到position屬性。
學(xué)習(xí)學(xué)習(xí)
position 可選的屬性有：static霎桅；absolute栖疑；relative；fixed滔驶；
static：元素框（塊級元素生成的矩形框）自帶屬性遇革，正常生成的元素框再不做任何操作時所處的狀態(tài)。正是因為這是元素框的自帶屬性揭糕，如例子中所示萝快，他們作為文檔流的一部分會自上而下的排列，所以文字部分的高度不同影響了下面button部分位置的不同
absolute：絕對定位（跟別人比）著角，將其從文檔流中脫離出來揪漩，使用left right top bottom 屬性相對于其最接近的一個具有定位屬性的父包含塊中進(jìn)行絕對定位，如果不存在這樣的包含快吏口，則相對于body元素奄容，也就是瀏覽器窗口進(jìn)行定位。我就是利用這個性質(zhì)解決了上面的對齊問題
relative：相對定位（跟自己比）产徊，使用left right top bottom 屬性昂勒，相對于static默認(rèn)位置時的偏移。
fixed：固定定位（跟瀏覽器可視窗口比）舟铜；當(dāng)position屬性設(shè)定為fixed并且結(jié)合left right top bottom屬性時戈盈，效果就是當(dāng)滑動鼠標(biāo)瀏覽器窗口滾動時，該元素框不會隨著窗口的滾動而發(fā)生位置變化谆刨。好多網(wǎng)頁里煩人的廣告應(yīng)該就是用這個屬性實現(xiàn)的
問題的解決
經(jīng)過對position屬性的了解塘娶，確定該問題應(yīng)該將button的元素框position屬性設(shè)置為absolute，讓其位置相對于父級元素對齊痊夭。那么問題來了刁岸，什么叫做最近的一個具有定位屬性的父包含塊。所有的塊在未指定position屬性時都默認(rèn)為是static的她我。所以具有定位屬性的塊就是非static塊难捌。
1.將父包含塊元素的position屬性設(shè)定為relative膝宁，但是不設(shè)定left,right,top,bottom的值。
2.將button塊的position屬性設(shè)定為absolute根吁，left：150px员淫；bottom：10px;問題就解決啦>
.marketing .col-lg-4{ //父級塊元素
margin:0 5px;
text-align:center;
float:left;
width: 380px;
height: 480px;
position:relative;
}
.marketing .col-lg-4 .btn{ //button塊元素
position:absolute;
bottom: 10px;
left:150px;
}
