相対および絶対_html/css_WEB-ITnose についてのまとめ-htmlチュートリアル-php.cn

相対および絶対_html/css_WEB-ITnose についてのまとめ

WBOY

リリース： 2016-06-24 11:21:26

オリジナル

969 人が閲覧しました

对于定位这个性质我原理上来说自己是明白的，但是在实践的过程中，总会出现各种稀奇古怪的情况，加relative或是absolute就可以解决，但是遇到这些情况总是不明白为什么！！！难道是脑容量太小的原因吗！！！=_=!!<br />还是先记基础知识好了，因为里面还是有很多坑！！<br />相对定位：<br />　　　　内联元素加相对定位也不支持宽高！！<br />       relative并不会使元素脱离正常文档流！<br />       以上两点说明加上相对定位不影响元素本身的特性，内联元素和块元素依旧保持原来本身的特性！就是说原来是内联加上relative以后还是内联啦！<br />       如果不设置偏移量，相对定位本身并没有什么卵用~<br />      <br />       所以，相对定位要加偏移量，left/top/bottom/right是相对于该元素原来的位置设置偏移量的哦哦哦~<br /><br />绝对定位：<br />　　　　内联元素变得支持宽高啦~如果没有设置宽度，则内容撑开宽度！！（类似于float，内联元素加上float以后也支持宽高滴！！）<br />　　　　会使该元素完全脱离文档流<br />       如果有父级定位则是相对于父级发生偏移，没有定位父级则是相对于body发生偏移！<br />　　　　也是要搭配偏移量使用啦~<br /><br />如果直接在body里添加文字和一个<div>标签，<br />　　1. 给<div>设置absolute定位，不设置偏移量，则<div>定位在紧接着文字的下面<br />　　2. 给<div>设置absolute，并且设置偏移量，则<div>是按偏移量相对于body定位<br />　　3. 给<div>设置relative，不论是否设置偏移量，都是相对于自己的原来的位置定位。<br />

ログイン後にコピー

マスクポップアップウィンドウの実装:

<style>body{ height:100%; margin:0;}.shadow{ position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.5; filter:alpha(opacity=50);}.filter{ width:300px; height:200px; border:2px solid #000; background:yellow; position:absolute; top:50%; left:50%; margin-left:-152px; margin-top:-102px;}</style><body>contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />    <div class="shadow"></div>    <div class="filter"></div></body>

ログイン後にコピー

ここのシャドウ部分はボディに対して相対的に配置されます。！！ (body>html>Document)

このポップアップウィンドウに、position:absolute; top:50%; left:50%; とだけ書かれている場合は、左上隅のポイントが中央にあることを意味します。！！したがって、ここでは margin-top と margin-left を要素全体の高さと幅の半分に設定する必要があります。

そしてここに注目してください！！！ここでの幅と高さは、設定された幅と高さの値ではなく、padding+border+width とpadding+border+height の半分です。！！！

透明度を次のように設定します: opacity:0~1;filter:alpha(opacity=0~100); ただし、半透明は IE6 と互換性がありません。開くと真っ黒です~~

ここで別の質問があります。本体の高さを100%に設定する必要があります。そうしないと、IE6ではマスクが画面全体を占めません~

ここに質問があります。シャドウがposition:relativeに設定されている場合、将来、半透明マスク全体が表示されなくなるのはなぜですか? ? ? ！！！