1

ブラウザウィンドウで要素（div、しかしそれはポイントの横にあります）を水平方向に中央に配置する際に問題があります。親要素と比較して問題なく配置できますが、この HORIZONTALLY から解放されますが、垂直方向との関係は維持されます。多分私はあまりにも多くを求めていますか？:-) 私は position:fixed でそれを行うことができますが、要素はブラウザの 1 つの位置でフリーズします...

 #parent li {
    display:inline;
    text-align:center;
    float:left;
    position:relative;
    padding: 12px 10px 4px 10px;
    margin-right:10px;
    height:28px;
    border:none;

    }
.child {
    margin:16px 0px 0px 0px;
    float:left;
    z-index: 100;
    position:absolute;
    text-align:left;
    padding:0;
    border:1px solid #BBBBBB;
    border-top:none;
    line-height:14px;
}

別の言い方をすることもできます。

.child { 
margin:16px 0px 0px 0px; 
float:left; 
z-index: 100;
left: calc(50% - 400px); 
left: -moz-calc(50% - 400px); 
left: -webkit-calc(50% - 400px); 
position:fixed; 
top:inherit; 
text-align:left; 
padding:0; 
border:1px solid #BBBBBB; 
border-top:none; 
line-height:14px;
}

親に関係なく、それを真ん中に残します。偉大な。しかし、ページを下にスクロールすると、子が表示されている場合、残りのコンテンツはスクロールしますが、子はそのままです。そして、親が上から元の位置にないように少しスクロールした場合、子は親と整列しませんが、親が最初にあった場所の上からピクセル単位で表示されます...これは最適ではありません... :-/

4

1 に答える 1

0

div の位置に (top,bottom) プロパティを与えます。

#parent li {

position:relative;
top:50px;
left:50px;
}

.child {

position:relative;
top:50px;
left:50px;
}
于 2013-04-04T06:27:51.550 に答える