css之absolute绝对定位（绝对定位特性）

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

学习了绝对定位以后，对此进行一个总结，啦啦啦啦~

绝对定位特性

1、破坏性

破坏了原有的位置，从文档流里脱离出来

2、包裹性

如果下面这种情况，父级元素将不会有高度和宽度，失去原有的大小

aaarticlea/png;base64,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" alt="" />

父级

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAABgCAIAAABNOn3XAAAG5klEQVR4nO3aW0xTdxwH8D4v0QeetpeZmD0sS9An5xMmZlmcc7JIFHVeIqCSGRaNm2aAxENVLLRQobTcWiy0Rcq1NyilhbbHGrPGjOEVFYGAdlZKEShdSS//PRytnbSlImP/v/t9831oTg/nnP/5nPM/TSkLrVCkUvFKbQoSDmtFtkJRFEI0RVErsjVIOCvAw9gwBaGVzfvyRNqA0IongofFetcutnkj9O5bw6t4ZPk8sWw+ECE8skye+DYfghAeeXMcDadyqMTScDF/SRumUh47wW1CwmlokEThoRK4IaCrUCrisxXwYFfgwbrAg3WXybMw168+WjVw9dp/PoAPu+/AM27TmKn69+SZmdErFAUpKRvY7CxmiddrzM5OZb2OzSZkFhYVHU9KWpucvL6nhxcKWRGinU61QHAqOXm9XF4QZxePHin27Nm6Zs1HycnrW1oKAwFzMGi5c0d68uTuTZs+HxqSr9rJjTqK1eBZduXygvr6X6urf47kOXNm/1tnTS4vYLOzfD7T06ftWVk7RkaaAwEzl3tCpyvOzT0Yh2dhoe/s2R+uX68MhaxjYy1Hjmx3ubQOR2du7kGrVZCevnU1eRaPYuV5/hzoavq+nJNElX16geEZt2k4SRQniRqUvdrfnMPYcVg4+8yIEB30W0y54iemziWPOxaP12s8dWrP4OBVhOhbt+o2b/5CrS4Kv8tmZ8XhCYWsV678dP58xvR0l05XfPr0Xq/XyLzlcmn37fsqvCO9XqzR1PL5nMLCQqVS6PebPR5TTU2p2dyAED0+ri0vLx4f1y7eRTBo6eiottlkCNHDwyqZrMLr7Vu8WtRRuN0GqbS8uVnIZheWlFwaHlYhRNvtTQJByfS0ASG6tVXU2ipKlGfOYWzdK3g+2IVC9EhfZ+TdMyhrDvME/Za+cxKGZPaZUXei+i93lCOOxcNMbuvWfZyff2hqSudyabOzUycnNWZz+ZEj2zmc7EiP+DwI0T6f6dy5wywWKy1ti9OpDi9fzFNaenlsTPPyZa9QyL19uwUh2unsrqriTUxoZbIKu70p1i4cji4+n9PQUC6VlrvdhqjrRB2F223g8Yo0mlqfr//6dZlYXLaw0I8Q3d0tVqtr791rk0j4Ho8pUZ5xm6a/oB6FXr2OxYMQ/fQ3rZmqD/otT0ydN/myOKfvLZ5wZ2b0eXmHyspyXC7tsWM7pdK8nJy0qSmdXF6QOE8oZFUoCk6c2DU5qamoOHns2M6ZGX0sHr1ezLxWqWp6e18NzW5vKi29zNxPcYbw+HEnh3OxtrY08my+xbN4FG63oaqKx4g+f94tEnGZm8bjMUkkfD6f8/jxP2adpXnCJGMWdRyehbn+vvz6+RemG7xG593uZfAgRFutAjY7a36+9+jR7/LyDnk8BoTosrKcxCe3ly+7MzK+ffBAhhA9O9uTmbnj1q26JXlaWkTMnMbwVFfzFApBHJ67d9vEYr7D0dXUVFlXVxZ1cos6ikieiQltVRVvZsbI8DQ2VohEvPv3296BxzWkb9tfOecwuod7ZN/w4/AgRP8uuXa/vdVW3BDwWZbB43B0Hj+eqlIVIUSLxWdran7x+Ux37kjT0raMjipj8QQC5pKSHw8c+Nrt7kKI9ngMmZk72touBIOWhw8V6elbx8ZaYvHodHUI0aOj6srKEuYxMzKiFol4Tme3Uins6ZHEOv7JSf38fB9CtN9vjvp8Yrp4FG63QSTivXihX1gwq1Q1zGMmELAolUKDQTIyohYKuU7nm4t7CZ6g32IXKbifsJW7K/5obGZ4BmXNzEcDpuM2DbPy9Iihda9gSNUW63AZGFZEbDahy6Xdtu1LFouVkrKhvf2C39/PnOXz5zOSktampGy4ebMqDBP+w40bP2NO9Fs8CNEDA5Jdu7YwG+zr44dC1vAumGRnp3q9Rr1ezHztWFJyaWBAyVzCNTWlN27I0euny6NHHfGvs/hdPAq328DlFlEUxWYXNjZWMBOj3d4kEnFnZ40I0Wp1rVz+5sb9/35rEDm5rVojJ7dECjzAA11ugQfrRudJ/L+lkH81kT/ofK9f6nzIxSPAAzwkFo8AD/CQWDwCPMBDYvEI8AAPicUjwAM8JBaPAA/wkFg8AjzAQ2LxCPAAD4nFI8ADPCQWjwAP8JBYPAI8wENi8QjwAA+JxSPAAzwkFo8AD/CQWDwCPMBDYvEI8AAPicUjwAM8JBaPAA/wkFg8AjzAQ2LxCPAAD4nFI8ADPCQWjwAP8JBYPAI8wENi8QjwAA+JxSPAAzwkFo8AD/CQWDwCPMBDYvEI8AAPicUjwAM8JBaPAA/wkFg8AjzAQ2LxCPAAD4nFI8ADPCQWjwAPKTwQ/AI8WOdv/POdwykXO/sAAAAASUVORK5CYII=" alt="" />

<div>

     <div style="width: 100px;height: 100px;position: absolute；background:red;"></div>

</div>

3、去浮动

设置绝对定位以后，浮动的元素将会失效，来看下面的效果

  b {

     display: inline-block;

     float: right;

     width: 18px;

     height: 30px;

     background: url(../images/icon.png) no-repeat;

     background-position: -154px -42px;

 }

效果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqsAAAApCAIAAACdnvdcAAAFVElEQVR4nO3dv4/mRh3Hcf8TeZRrVkJBD8qRB6V5JBRlqJ7SDcKdJYRiOhcg/wnTjYSAh86dBQUGGgsKlxY00z0do9xdYpJcRgm7moi77Lc+CtvPsz8uJy3RHZB5v2StVpY99lb++Dvf8SbPAABAfJJnz56NAAAgGtcSgAAAgAiQAAAAiBEJAACAGJEAAACIEQkAAIAYkQAAAIgRCQAAgBiRAAAAiBEJAACAGJEAAACIEQkAAIAYkQAAAPh/9sUXn7z308c/+7lcXt7pvLslgEEnJ3oQEVcX+8PzD02beTS73+nhK8cMfjYehr7v+75r9saYfb/ci2+LrHGnE1yTFZ2/w98IAMA31uX5xcPvvPno++/Il1/e6cQ7J4D5WT7/Zs0muUYPMrZ53o6nBODq1NjbYx3qVM3SPE/X21wbU7d93/d9b50P83Gu3u1qd/XMsUnXegi3hwQAIDaX5xcP77/1wbs/eAUJ4PRjbLJrL/djk+pBXK2q4VQDuBUSlvLBzB+aUq1T0z/32mHQ26oPN8oPVx1LDQAAxOe/kQCKstwZ67siX2ryY5PqIfTlaq3U9my1VqpsO1O2XsYmLftg9UpP2cCJiAQ31Dcf/v7Q7YtdtswsjE26q534tsjbUURkbDP1vIoCAABxevJkTgB39LVqACIS+vL0Ej42qR6s2Rm79AH4rig6LzJUqnbTscczXK2S9WaZCVDbsyRJkrNdWQ/LeKEvt3oI4ppqygyuyZS2QUQkWFM27vYtAgDwjfbkww8v2j+cL9vFb3/34I31w++9ff779vzK/qeffvricb5uAhh01oyuycrOTwngL53eW5kTgO+qvRURa7Z6EFfvtJWxSW8W7v2hM7nKdWu9hHE8dvlZo7ZKbXfTpL8fdHp1+n9ss7QmAwAA4nL+xz99trr3eNk+Wd17/7XXH7z2+uMrOx+v7oW//u3F4/xHCWBj7JQAQl8VrRexelUNSx/AcqgqdVm2TkSmsoBv86LzMjbp1Mof/HjoG51nxb47LAsCvOtNXtSH44M+jM6LBO8HPfUTrNZzwWC1VmpNBgAAxOVff3f/3P/m8+P2i18++Na3H9zffParX39+Zf/Tf3z04nHungD6vkybcdCJHkJfzg/zvlS1E2s2egjTVP5ZsinbgxeRsc2yZhTf5nnrRVytppiwtAiebZVSSq1XK5VXxhhjTJWnVe9FxDX52SpJktW66EaRYwFhKUGMbWksqwIAAPF6+vTh/bcevew+ABERV+/W27xxIq5JV+vtMouftVMsGEymW+v7eS2Aa/K8cSLWqKoPcnVF4fUbuT454JrSWN9Xu2Lf2jGcLq6q4asHAQAgMq9oLYCIWJPVzveVuvaVHrFmu0wNTAadNmOwJtNDkDBotXzFZ6jUsXIfDvWUD44JwHdlfnNhYBh7k6u9FXH1bhrmeKWxLevnfpEIAIAYvKIEEAadzr34rsmnwvyRH/T29Bp/+iJQONT57tjCZ/Vmnjk4NMUu3du57++wXzKCtybdTQ0E3nUmU5luD15k7E6xw5pNNYiI9NWGxYEAgHhdnl88evO7j95592UmAN8WeXur8c7VKpnn8/P9aU5+SQBjk+f1IYhr0qmPL9vbIMGatGiWNoEkSZKVKq8ECm9NWrR/NtlcDxjbIi2n40VEJNh9vj1LkrNtTgkAABCzED764Y8+/vFPXu7/BQAAAP9zLi/v+vgXEgAAAHEiAQAAECMSAAAAMSIBAAAQIxIAAAAxIgEAABAjEgAAADEiAQAAECMSAAAAMSIBAAAQIxIAAAAxupkAAABAJE4JAAAAxIYEAABAjP4NXelJkAA7lRkAAAAASUVORK5CYII=" alt="" />

加上position：absolute以后

 b {

     position: absolute;

     display: inline-block;

     float: right;

     width: 18px;

     height: 30px;

     background: url(../images/icon.png) no-repeat;

     background-position: -154px -42px;

 }

效果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqUAAAAnCAIAAAC5XaafAAAFWElEQVR4nO3dsY/0RhnHcf8TWeVtTkJBi/KSRWlWQlGGaks3CHeWEIrpXID2T5huJAQsnTsLCgw0FhQuLWim245R3vdNhiRvRgl3moj3zT31S2F7d+9uE12iIHjN96PV6WR5x3vb/GaeZ+xLXrx44b0XAAAwXwl5DwDA7JH3AADMH3kPAMD8kfcAAMwfeQ8AwPyR9wAAzB95DwDA/JH3AADMH3kPAMD8kfcAAMzfvPL+s88+euenT3/2c7m+/m9/FAAA/ofcK+97nRzpXkRcVez2509N63E0u9vo/gvHjGHk933XdV3X1jtjzK6bPktoiqx2xze4Oiva8KWf8/ry6vF3Xn/y/bfk88+//C8CAOD/yn3zfkzu8TdrVskNuhff5Hnjj3nvqtTYu2Ptq1SN0jxPl+tcG1M1Xdd1XWddiON5rtpsKnf6Tl+nS93Hu0MeXF9ePX74xntv/4C8BwDg1P3z/vjD19mNhbuvU92Lq9S2P67v70wJptLAKOzrUi1T0529duz1etvFW6WFU4cywgnyHgCAs7563hdluTE2tEU+Vdd9neo+duViqdT6YrFUqmxaUzZBfJ2WXbR6oYeZgBMRia6vbkd92Le7YpNNPQJfp5vKSWiKvPEiIr7J1LlqwS3Pno15DwAATnyd9b2IxK48LrB9neremo2xU/8+tEXRBpF+qyo3nHt4h6tUslxNNX21vkiSJLnYlFU/jRe7cq37KK7eDjMEV2dK2ygiEq0pj139Z++/f9X84XJ6Xf32d49eWz7+3puXv28uT44///jjb/p7AwDgZfI1877XWe1dnZVtGPL+L63eWRnzPrTbnRURa9a6F1dttBVfp7dL8GHfmlzlurFBoveHvXjWqLVS683QrA+9Tk/b9r7J0qmxf/nHP32yePB0en20ePDuK68+euXVpycHny4exL/+7Zv5tgAAeDl9lbxfGTvkfey2RRNErF5s+6l/P52qSl2WjRORYckfmrxog/g6HbbXx+D3Xa3zrNi1+2mTfnCdyYtqf4j16F0QiSH0etgHsFiOxYDFUqnlmPj/+rv75+43nx5ev/jlo299+9HD1Se/+vWnJ8ef/+OD/9DXBwDAS+Heed91ZVr7Xie6j105RndXqsqJNSvdx6EFf5GsymYfRMQ3WVZ7CU2eN0HEVWqYFEwb+S7WSimllouFyrfGGGPMNk+3XRARV+cXiyRJFsui9SKH4sBUXvBNaeyZnfrPnz9++MYT+vcAANx07+ftuGqzXOe1E3F1uliup+571gyTgN5kurGhG/fnuzrPaydijdp2UU7v6bvhVpnf1aWxodtuil1jfTxeXG37Lx5kwv58AADOum/eW5NVLnRbdeMZOGLNeiryD3qd1j5ak+k+Suy1mp6R02/V4Xb6uK+G2cAh70Nb5rdvzYu+M7naWRFXbYZhDlfyTVndfd4PeQ8AwFn3yvvY63TcH+/qfCixH4Rer49L9OPzduK+yjeHjXZWr8YewL4uNunOjrvz9rtpRhCsSTdD4z+41mQq080+iPj2OMmwZrXtRUS67erM7XnXl1dPXv/uk7feJu8BADh1j7wPTZE37vZRV6lk7MPnu2Mvfcp7X+d5tY/i6nTYbZftbJRoTVrUU3s/SZJkocqT6UOwJi2aP5tsXOv7pkjL4XwREYl2l68vkuRinZ9Z3ovE+MEPf/Thj3/C8/MBADg1r/+XIyLX14Q9AAC3zC7vAQDAHeQ9AADzR94DADB/5D0AAPNH3gMAMH/kPQAA80feAwAwf+Q9AADzR94DADB/5D0AAPNH3gMAMH9j3gMAgBlLXgAAgLkj7wEAmL9/A+18vlo5NHWsAAAAAElFTkSuQmCC" alt="" />

4、位置跟随

如上一个效果，加号aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAARCAIAAACNaGH2AAAB9ElEQVQokW2Sz2pTQRTG70ootqZVca1StKTUnfgGgoIPIfgCijaI0q7FRduk+gDiSl9CEt2EljRgEizElMTcaPDmzsz5zpl78+eOi5sGUnsWM8Ocb76Z4ft5zMzMSEeARXgYs7VAujdX3nQG0ja0Nr6PwYBFAPD8GW+qJCIimUzUweHx3Xt/PnwU50gpJppTE4GZCYAxnCRBsfT9woK/s2uTBGF41ns4FKM0aU1K8WgUfCnWM5f9vbyMxxQE0BrGTB8JeMORJbYcRbBWnAvL5dpipvfufeQcAIkjieP0Y8zsmVCpRiOoVILKUfjjuP/pc+3SSmdrO2w2g4PD4KgaVKsm+Dv17tcavfsPOjdW29mNTnajtXq7fuVa8/rNX+t32mvZ9tp6+1Y2KJXYWiLy5KTVe/PWf/qsm3vpv3rdefyktnL158NHva3t7vPN7mau+yKn6g0WISLPTawmEDMB7NygXK4tZvzCvjhHWkMEIrNAPBJJswQgzg2+fqsvLfcK+9Y5aM3MfKpmZq/vnFWaiGAMT5JBsVRfWvb38pIkCEMQYRYz4PFkRMqAiIyRxA2KpdrCRX9n156b5diSITAAIo5j0zr5nS+E5bIMhzDmbJaEUwbTG6PIOifjMYj4Pwy9VMWngAKAUiCaWZxH7KyRUjpbz9c/XgacFm02u6YAAAAASUVORK5CYII=" alt="" />跑到购物系统的后面，而不是在，左上角，如果设置了left,top等的值，aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAARCAIAAACNaGH2AAAB9ElEQVQokW2Sz2pTQRTG70ootqZVca1StKTUnfgGgoIPIfgCijaI0q7FRduk+gDiSl9CEt2EljRgEizElMTcaPDmzsz5zpl78+eOi5sGUnsWM8Ocb76Z4ft5zMzMSEeARXgYs7VAujdX3nQG0ja0Nr6PwYBFAPD8GW+qJCIimUzUweHx3Xt/PnwU50gpJppTE4GZCYAxnCRBsfT9woK/s2uTBGF41ns4FKM0aU1K8WgUfCnWM5f9vbyMxxQE0BrGTB8JeMORJbYcRbBWnAvL5dpipvfufeQcAIkjieP0Y8zsmVCpRiOoVILKUfjjuP/pc+3SSmdrO2w2g4PD4KgaVKsm+Dv17tcavfsPOjdW29mNTnajtXq7fuVa8/rNX+t32mvZ9tp6+1Y2KJXYWiLy5KTVe/PWf/qsm3vpv3rdefyktnL158NHva3t7vPN7mau+yKn6g0WISLPTawmEDMB7NygXK4tZvzCvjhHWkMEIrNAPBJJswQgzg2+fqsvLfcK+9Y5aM3MfKpmZq/vnFWaiGAMT5JBsVRfWvb38pIkCEMQYRYz4PFkRMqAiIyRxA2KpdrCRX9n156b5diSITAAIo5j0zr5nS+E5bIMhzDmbJaEUwbTG6PIOifjMYj4Pwy9VMWngAKAUiCaWZxH7KyRUjpbz9c/XgacFm02u6YAAAAASUVORK5CYII=" alt="" />加号的位置就会发生改变了