.panel{

width:100%;

}

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

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

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

`
然后在panel里這樣寫

    .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來設(shè)置他的高度，這樣panel容器就會一直在layout最下面

因為絕對定位元素寬度的計算方式不一樣。

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

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

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

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