絕對positionning：在Chrome 53

-1

新Flexbox的行爲，我注意到有絕對定位Firefox和Chrome（從V53）之間的差異在Flex容器絕對positionning：在Chrome 53

的Chrome 53像我們所使用的元件上的left: 0;。相反，該元素應該放在之前的元素之後。

body { background-color: #252525; color: #eee; } 
 

 
.container { width: 100%; display: flex; flex-flow: row nowrap; background-color: grey; } 
 

 
.static-content, 
 
.absolute-content { display: flex; } 
 

 
.static-content { flex: 0 0 auto; } 
 
.absolute-content { flex: 1; background-color: tomato; position: absolute; }

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    </head> 
 

 
    <body> 
 
    <h1>Test</h1> 
 
    
 
    <div class="container"> 
 

 
     <div class="static-content"> 
 
     Hello world! 
 
     </div> 
 

 
     <div class="absolute-content"> 
 
     Yo! 
 
     </div> 
 

 
    </div> 
 
    
 
    </body> 
 

 
</html>

我怎能在Chrome新版本Firefox的行爲？

謝謝！

來源

2016-09-01 devoups

相關？ - http://stackoverflow.com/questions/32991051/why-is-an-absolutely-positioned-flex-item-not-being-ignored-by-justify-content –

如果這是您的問題，請使用額外的容器 – Huangism

它與一個額外的容器一起使用。

body { background-color: #252525; color: #eee; } 
 

 
.container { width: 100%; display: flex; flex-flow: row nowrap; background-color: grey; } 
 

 
.static-content, 
 
.extra-container, 
 
.absolute-content { display: flex; } 
 

 
.static-content { flex: 0 0 auto; } 
 
.absolute-content { flex: 1; background-color: tomato; position: absolute; }

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    </head> 
 

 
    <body> 
 
    <h1>Test</h1> 
 
    
 
    <div class="container"> 
 

 
     <div class="static-content"> 
 
     Hello world! 
 
     </div> 
 

 
     <div class="extra-container"> 
 
     <div class="absolute-content"> 
 
      Yo! 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    
 
    </body> 
 

 
</html>

來源

2016-09-01 14:35:15 devoups

絕對positionning：在Chrome 53

回答

相關問題