2017-10-24 14 views
0

したがって、私はabsolute vs relativeとテストしており、ほとんどの部分について理解し始めています。あなたがabsoluteを使用し、親がrelativeである場合、それはあなたの親に関連する調整を使用することをその部分を得る。css相対vs 3レベルdivの絶対値

私がpositionに親を親にしたければ質問します。

どのようにする必要がありますか?

I have this repl which has this implementation。だから、基本的に、私はdiv要素2はdivの1に対する相対になりたい場合は

(しかし、divの2がすでにposition:relativeであり、absoluteを持っている3つのdivための親です)。

私はここで相対的なdivと絶対的なdivの2つの関係を作ることができます(しかし、それはすでに相対的です)。

正しいことは何ですか。

#one { 
 
     width:50px; 
 
     height:30px; 
 
     background-color:yellow; 
 
     margin:20px; 
 
     padding:15px; 
 
     top:200px; 
 
    } 
 
    
 
    #two { 
 
     width: 200px; 
 
     height: 100px; 
 
     background-color:red; 
 
     margin:10px; 
 
     padding:10px; 
 
     left:500px; 
 
     top:100px; 
 
     position:relative; 
 
    
 
    } 
 
    
 
    #three { 
 
     width:15px; 
 
     height:20px; 
 
     background-color:green; 
 
     position:absolute; 
 
     left:0px; 
 
    }

 
    
 
    <!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width"> 
 
     <title>repl.it</title> 
 
     <link href="index.css" rel="stylesheet" type="text/css" /> 
 
     </head> 
 
     <body> 
 
     <div id="one"> 
 
      <div id="two"> 
 
      <div id="three"></div> 
 
      </div> 
 
     </div> 
 
     <script src="index.js"></script> 
 
     </body> 
 
    </html>

+0

申し訳ありませんが、コードのリンクはありますか? – user3502374

+2

あなたのリンクが亡くなった場合、この質問は役に立ちませんので、あなたの質問に含める方が良いでしょう。 – Swellar

答えて

1

あなたの問題はここに位置されていません。あなたの問題は、ブラウザの端から離れた特定の位置divの左と上の使用です。私があなたのCSSをこれに変えれば、あなたの部門がお互いに出てきます。

#one { 
 

 
     background-color:yellow; 
 
     margin:20px; 
 
     padding:15px; 
 
     top:200px; 
 
     position:relative; 
 
    } 
 
    
 
    #two { 
 
     width: 200px; 
 
     height: 100px; 
 
     background-color:red; 
 
     margin:10px; 
 
     padding:10px; 
 
     position:relative; 
 
    
 
    } 
 
    
 
    #three { 
 
     width:15px; 
 
     height:20px; 
 
     background-color:green; 
 
     position:absolute; 
 
     left:0px; 
 
    } 
 
 
 
    <!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width"> 
 
     <title>repl.it</title> 
 
     <link href="index.css" rel="stylesheet" type="text/css" /> 
 
     </head> 
 
     <body> 
 
     <div id="one"> 
 
      <div id="two"> 
 
      <div id="three"></div> 
 
      </div> 
 
     </div> 
 
     <script src="index.js"></script> 
 
     </body> 
 
    </html>

0

私はあなたが求めているものを必要とします状況があるだろうとは思いません。もしあれば、私は例を見たいと思う。

2番目と3番目の数字を絶対に最初の数字にすることで、どんな効果を達成することができます。div第2の正確な座標を知っているdiv。それらを使用することによって、第3の絶対位置が何であるかを計算することができますdiv

関連する問題