2017-10-24 12 views
0

Also ich w/absolute vs relative mich entschieden und für die meisten Teile, beginne ich zu verstehen. Ich bekomme den Teil, dass, wenn Sie absolute verwenden, und Ihr Elternteil ist relative, wird es die Koordination in Bezug auf Ihre Eltern verwenden.css relativ vs absoluten innerhalb von 3 Level div

Frage ist, wenn ich zu position dass Eltern es Eltern wollten.

Wie sollte es sein?

I have this repl which has this implementation.

Also im Grunde, wenn ich div zwei wollte relativ sein, ein div (aber div zwei ist bereits position:relative und es ist Eltern drei bis div die absolute hat).

Wie kann ich Beziehung hier div man als relative und div zwei als absolute (aber es ist schon relativ).

Was ist das Richtige zu tun?

#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

Entschuldigung, haben Sie den Link für den Code gesehen? – user3502374

+2

Diese Frage wird nutzlos sein, wenn dein Link gestorben ist, also wäre es besser, ihn in deine Frage aufzunehmen, und das meine ich mit keinem Code – Swellar

Antwort

1

Ihr Problem positionieren ist hier nicht. Ihr Problem ist die Verwendung von links, und oben, welche Position div speziell in einem Abstand von den Kanten des Browsers. Wenn ich Ihre CSS zu diesem ändern, kommen Ihre Divs in einem anderen heraus.

#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

Ich glaube nicht, wird es eine Situation sein, was Sie benötigen fragen. Wenn ja, würde ich gerne ein Beispiel sehen :).

können Sie erreichen, was Sie wollen Effekt durch die zweite und dritte div ist absolut zum ersten platzieren. Sie kennen die genauen Koordinaten des zweiten div. Mit diesen können Sie berechnen, was die absolute Position des 3. div sein soll.

Verwandte Themen