前端位置布局汇总

HTML中脱离文档流的元素有：

1. position: absolute - 元素相对于最近的已定位（非 static）祖先元素定位。

2. position: fixed - 元素相对于浏览器窗口定位。

3. float: left 或 float: right - 元素向左或向右浮动，周围的内容会环绕它。

没有脱离文档流的元素是：

1. position: static - 默认定位方式，不脱离文档流。

2. position: relative - 元素相对于正常位置定位，但不脱离文档流。

    static(静态) 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级，这是默认值。
    relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
    absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
    fixed（固定定位） 这里所固定的参照对像是可视窗口而并非是body或是父级元素，其总是固定在浏览器窗口的某个位置，并且不受滚动的影响，是绝对的坐标定位。可通过z-index进行层次分级。

绝对位置

style="position: absolute;left: 218px;top: 0%;"

style="position: absolute;bottom:5px;right:5px ;"

 float 

<a href="/home/">
<button  style="float:right;background-color:#353c48;color:white">主页</button>
</a>

相对位置 :margin外边距  padding内边距

style="border:1px solid black;width:200px;text-align:left;margin-left:1200px;padding-left:10px"

 修改width:500px,height 同

 修改text-align: right

修改margin-left :200px

margin-left:-webkit-calc(50% - 100px)  注意减号左右的空格

修改padding-left :200px