為什么把位置設(shè)置：absolute，右邊的框就縮成一團(tuán)了？

.panel{

width:100%;

}

position的屬性absolute是絕對(duì)定位的意思，如果沒(méi)有父級(jí)元素做參照那么absolute將會(huì)以瀏覽器作為參照，并且將當(dāng)前元素變?yōu)樾袃?nèi)元素。h3和p標(biāo)簽原本都是塊級(jí)元素獨(dú)占一行，現(xiàn)在脫離了標(biāo)準(zhǔn)流，所以如果要展示原來(lái)的效果，需要重新將寬度設(shè)置為100%

absolute布局是形成一個(gè)新的BFC，就是一個(gè)新的布局，BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素，所以的寬度有里面的內(nèi)容決定。也就是p標(biāo)簽里面的內(nèi)容

absolute是相對(duì)于向上查找第一個(gè)為position:relative;的絕對(duì)定位，如果父級(jí)沒(méi)有相對(duì)定位，會(huì)接著找父級(jí)的父級(jí)，直到最后找到body上，你這個(gè)布局如果想讓panel一直定位在layout的最下面，要在父級(jí)本身上設(shè)置一個(gè)相對(duì)定位`.layout{
width: 600px;
margin: 0 auto;
position:relative;
}

`
然后在panel里這樣寫(xiě)

    .panel{
  box-shadow: 0 3px 3px 3px rgba(0,0,0,0.4);
  position:absolute;
  width:100%;
  bottom:-200px;
}

bottom的值就取你panel盒子的高度，我這假設(shè)你盒子是200px,如果后期你panel高度不確定，就用js來(lái)設(shè)置他的高度，這樣panel容器就會(huì)一直在layout最下面

因?yàn)榻^對(duì)定位元素寬度的計(jì)算方式不一樣。

原來(lái)的 .panel 是正常流下的塊級(jí) non-replaced 元素，左右的 margin padding 和 border 都為 0，所以剩下的默認(rèn)值為 auto 的 width 占了全部可用空間。

在 absolute 定位的情況下，計(jì)算需要加入 left 和 right，默認(rèn)值都是 auto，所以 ltr 方向下 left 先調(diào)整到 static position ，也就是 0，然后對(duì) width 用 float 相同的 shrink-to-fit 方式計(jì)算，即盡可能的縮小，最后 right 獲得剩余的空間。

所以如果要獲得父元素 content box 的寬度可以用 width: 100%;，如果要獲得定位元素 padding box 寬度可以用 left: 0; right: 0;。

脫離了文檔流，絕對(duì)定位具有包裹性，所以?xún)?nèi)容多少就等于寬度多少，要設(shè)置width:100%