Warum schneidet ein floated link div mit einem linksbündigen div?

-1

Ich habe ein festes div auf der linken Seite meines Bildschirms und ich möchte dort die Kategorien setzen, und in der Nähe davon möchte ich 2 weitere divs setzen, das erste breiter als das zweite, und beide sollen schweben links, aber das Problem ist, dass die 2 divs sich mit dem festen schneiden, und ich will das nicht, wie kann ich das lösen? Ich habe eine Geige hier gemacht: https://jsfiddle.net/rn11jxh2/Warum schneidet ein floated link div mit einem linksbündigen div?

HTML:

<div id="meniu"> 
    <div id="cat" > 
     <div class="catico"> 
     <img src="img/Categories.png"/> 
     </div> 
     <div class="cattext"> 
      Categories: 
     </div> 
     </div> 
     <ul> 

      <li>sdncsldncsd </li> 
    <li>sdncsldncsd </li><li>sdncsldncsd </li><li>sdncsldncsd </li><li>sdncsldncsd </li><li>sdncsldncsd </li><li>sdncsldncsd </li> 



     </ul>  

    </div> 
    <div id="invitapemail"> 

       </div> 




    #invitapemail { 
float:left; 
position:relative; 
height:200px; 
width:620px; 
right:30px; 
background-color:white; 
border:2px solid #797979; 
border-radius:1em; 
padding:10px; 
margin-top:10px; 
font-family:Verdana, Geneva, sans-serif; 
font-size:1.2em; 
color:#797979; 
z-index:2; 
} 
#meniu{ 
position:fixed; 
height:420px; 
width:140px; 
line-height:30px; 
font-size:1.15em; 
margin-left:0px; 
padding-right:75px; 
padding-left:30px; 
text-decoration:none;}

Quelle

2016-04-20 Andrei Bularca

Hmm würdest du also gerne das div als fixed und anderes als was verlassen? Ich habe diesen Teil nicht ganz verstanden. –

Das erste div bleibt fix und hat die gleiche Position, egal ob du scrollst und das zweite div, das float hat, um in der Nähe des festen div zu sein (nicht über dem festen div) –

Wahrscheinlich nicht die beste Lösung, aber zumindest sie don kein Konflikt: #menu: z-index: 3 | oder | #invitapemail: Position: fixiert; Rand oben: 300px; –

Das ist erwartetes Verhalten. position:fixed entfernt das Element aus dem Dokumentfluss. Das bedeutet, dass andere Elemente ignoriert werden, als ob sie nicht vorhanden wären. Dies kann zu Überschneidungen führen. Die float:left verschiebt Ihren Inhalt nach links, als wäre das feste Menü nicht vorhanden.

Sie können eine margin-left setzen die Elemente durch die Breite + Polsterung des Menüs, in diesem Fall zum Ausgleich sieht es aus wie 200px: https://jsfiddle.net/rn11jxh2/1/

Sie mehr über Positionierung lesen und schwimmt hier: https://css-tricks.com/all-about-floats/

Quelle

2016-04-20 21:06:23 skyline3000

Warum schneidet ein floated link div mit einem linksbündigen div?

Antwort

Verwandte Themen