css - 絶対配置とその親要素

Question

position絶対配置を使用する場合、親として機能させたい要素にはofが必要であるといつも聞いていましたrelative。

私は CSS ドロップダウンメニューを作成しようとしていましたが、ドロップダウンメニュー項目をメインメニュー項目の幅を超えて伸ばすのに苦労していましたrelative。ドロップダウンメニュー項目のテキストは折り返されます。

そこで、他の例のメニューを見て、彼らがどのようにそれを行ったかを確認しました.1つは、私のように絶対配置を使用していたにもかかわらず、positionの親要素を使用していませんでした.relative

その例はここにあります: http://purecssmenu.com/

relativeそこで、ポジショニングとビンゴを削除しようとしましたが、問題は解決しました。ただし、現在、ポジショニングを使用している親がなく、絶対ポジショニングを使用しています。relativeそれらはすべてに設定されていstaticます。

それで、それがどのように理にかなっているのか疑問に思っています-relative親がいないと、ブラウザウィンドウにフォールバックしませんか?

必要に応じて、ここに私の HTML があります。

    <div class="navWrapper">
        <div class="left"></div>
        <div class="nav">
            <ul>
                <li class="home"><a href="/">Home</a></li>
                <li class="spacer"></li>
                <li class="about"><a href="about_us/">About Us</a></li>
                <li class="spacer"></li>
                <li class="trademark"><a href="freetrademarksearch/">Free Trademark Search</a></li>
                <li class="spacer"></li>
                <li class="services">
                    <a href="services/">Services</a>
                    <ul class="sub">
                        <li><a href="">Trademark Search</a></li>
                        <li><a href="">Prepare &amp; File Trademark</a></li>
                        <li><a href="">Trademark Infringement</a></li>
                    </ul>
                </li>
                <li class="spacer"></li>
                <li class="testimonials"><a href="testimonials/">Testimonials</a></li>
                <li class="spacer"></li>
                <li class="more"><a href="javascript:void(0);">More Information</a></li>
                <li class="spacer"></li>
                <li class="contact"><a href="contact-us/">Contact Us</a></li>                 
            </ul>
            <div class="contentClear"></div>
        </div>
        <!-- Nav Ends -->
        <div class="right"></div>
    </div>
    <!-- Nav Wrapper Ends -->

CSS:

#header .navWrapper {
    width: 1004px;
}

#header .navWrapper .left {
    float: left;
    width: 4px;
    min-width: 4px;
    height: 47px;
    min-height: 47px;
    background: url('../images/nav-left-bg.png') left top no-repeat;
}

#header .navWrapper .nav {
    float: left;
    width: 994px;
    border-top: 1px solid #e0d0b4;
    border-left: 1px solid #e0d0b4;
    border-right: 1px solid #e0d0b4;
    border-bottom: 1px solid #e8dcc8;
    background: url('../images/nav-button-bg.png') left top repeat-x;
}

#header .navWrapper .nav ul {
    margin: 0 1px;
    display: block;
}

#header .navWrapper .nav li {
    float: left;
    display: block;
    height: 45px;
    font-family: OpenSansBold, Arial;
    font-size: 16px;
    line-height: 2.9;
    text-align: center;
    color: #646464;
}

#header .navWrapper .nav li.spacer {
    width: 2px;
    min-width: 2px;
    height: 45px;
    min-height: 45px;
    background: url('../images/nav-button-spacer-bg.png') left top no-repeat;
}

#header .navWrapper .nav li a,
#header .navWrapper .nav li a:visited
{
    display: block;
    height: 45px;
    padding: 0 20px;
    color: #646464;
    text-decoration: none;
}

#header .navWrapper .nav li a:hover,
#header .navWrapper .nav li a:active,
#header .navWrapper .nav li a:focus
{
    color: #fff;
    background: url('../images/nav-button-bg.png') left bottom repeat-x;
}

#header .navWrapper .nav li.home {
    max-width: 86px;
    text-indent: -1px;
}

#header .navWrapper .nav li ul.sub {
    position: absolute;
}

#header .navWrapper .nav li ul.sub li {
    float: none;
    display: block;
    font-family: OpenSansSemibold, Arial;
    font-size: 14px;
    line-height: 2.3;
    height: auto;
    text-align: center;
    background-color: #f4771d;
    color: #fff;
}

#header .navWrapper .nav li ul.sub li a,
#header .navWrapper .nav li ul.sub li a
{
    color: #fff;
    height: auto;
}

#header .navWrapper .nav li ul.sub li a:hover,
#header .navWrapper .nav li ul.sub li a:focus,
#header .navWrapper .nav li ul.sub li a:active
{
    background: #d66627;
}

#header .navWrapper .right {
    float: right;
    width: 4px;
    min-width: 4px;
    height: 47px;
    min-height: 47px;    
    background: url('../images/nav-right-bg.png') left top no-repeat;
}

score 19 · Accepted Answer

、、または-- だけでなく、 (デフォルト)以外の任意の値として定義された位置を持つ最も近い祖先要素にフォールバックします。relativeabsolutefixedrelativestatic

一般に、親によって確立されたグリッドに従ってアイテムを絶対に配置する必要があります。ただし、より高い要素によって確立されたグリッドに配置することが理にかなっている場合もあります。

例えば：

HTML

<body>
    <div id="div1">
        <div id="div2-A">[some content]</div>
        <div id="div2-B">
            <div id="div3">[more content]</div>
        </div>
    </div>
</div>

CSS

#div1{
    width:1024px;margin:auto;
    position:relative
}
#div3{
    position:absolute;
    bottom:0px; left:0px;
}

この場合、div3 は div1 (その祖父) の左と下に配置されます。その直接の親 (div2) には defaultposition:staticがあり、その子の絶対配置コンテキスト/グリッドとして確立されないためです。 . しかし、div3 は(必然的に) ビューポートまたはページ本体の左側にずっと移動しません。これは、次に高い要素 (div1) の位置が相対的に定義されているためです。

更新
あなたが提供した場合 (http://purecssmenu.com/)、position:relative 宣言が :hover 疑似クラスに適用されているため、Google Developer Tools またはファイアーバグ。

親要素を調べることで、Google 開発者ツールでこれを調べることができます。次に、[スタイル] パネルの右側にある [要素の状態の切り替え] ボタンをクリックします (点線の境界線と矢印が中を指しているボックスのように見えます)。 ":hover" の横にあるチェックボックスをオンにします。Firebugにも似たようなものがあると確信しています。

次の宣言がリストに追加されます。

ul.cssMenu li:hover { position: relative; }

これは、親にカーソルを合わせていない場合<li>、サブメニュー<ul>がで非表示display:noneになるため、どこに配置されていても問題ありません。

score 2 · Accepted Answer

要素が配置されているときの最も近い祖先に関する別のメモ。

OP から 3 年後、transform などの CSS3 プロパティがより広く使用されるようになり、暗黙的に新しい包含ブロックが作成され、要素に強制的にposition: relative/absolute;

したがって、中間position: staticの親要素が子要素の配置に影響を与えないようにするには、設定があるかどうかを確認する必要がありますtransforms。

例

    <div id="one">
      <div id="two">
        <div id="three"></div>
      </div>
    </div>

    #one {
      position: relative;
    }
    #two {
      position: static;
      transform: none;
    }
    #three {
      position:absolute;
    }

css - 絶対配置とその親要素

2 に答える 2

Related

Reference