20180103 CSS Position Posted on 2018-01-03 Edited on 2020-01-01 In 學習筆記 Disqus: CSS Position Nonreplaced Elementhorizontal: left right width margin-left margin-right See the Pen <a href='https://codepen.io/zonetw/pen/zXOWRZ/' target="_blank" rel="noopener">CSS position absolute 1 </a> by Zone (<a href='https://codepen.io/zonetw' target="_blank" rel="noopener">@zonetw</a>) on <a href='https://codepen.io' target="_blank" rel="noopener">CodePen</a>. Vertical: top bottom height See the Pen <a href='https://codepen.io/zonetw/pen/wZwmQV/' target="_blank" rel="noopener">CSS position absolute: vertical top bottom height</a> by Zone (<a href='https://codepen.io/zonetw' target="_blank" rel="noopener">@zonetw</a>) on <a href='https://codepen.io' target="_blank" rel="noopener">CodePen</a>. vertical align/ top bottom X margin: auto or 0 See the Pen <a href='https://codepen.io/zonetw/pen/pBzVww/' target="_blank" rel="noopener">CSS Position: absolute vertical align center/ margin top bottom</a> by Zone (<a href='https://codepen.io/zonetw' target="_blank" rel="noopener">@zonetw</a>) on <a href='https://codepen.io' target="_blank" rel="noopener">CodePen</a>. Replaced Element See the Pen <a href='https://codepen.io/zonetw/pen/MRgXbz/' target="_blank" rel="noopener">CSS Position: ReplacedElement</a> by Zone (<a href='https://codepen.io/zonetw' target="_blank" rel="noopener">@zonetw</a>) on <a href='https://codepen.io' target="_blank" rel="noopener">CodePen</a>.