元素定位

我正在为从AJAX调用返回的内容定位而挣扎。元素定位

这里是我的HTML是如何布局的例子：

<!DOCTYPE html> 
<html lang="en-US"> 

    <head> 

    <meta charset="UTF-8"> 
    <title>Photography</title> 
    <link rel="stylesheet" type="text/css" href="styles.css"> 

    </head> 

    <body> 

    <section id="content"> 

    <div id="container"> 

     <div id="about"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia odit culpa excepturi itaque hic laborum odio nam deserunt ipsum dolor rerum repudiandae, quidem voluptatem nisi numquam tempora vel consequuntur harum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam ut error consectetur eum delectus porro dolore repellendus quidem! Ad, dignissimos minus debitis nam sunt aliquid eius quam cum, omnis magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe vero ducimus reprehenderit quibusdam esse sed, porro pariatur illum natus tempore? Iste laborum odio deleniti molestias praesentium delectus repudiandae consequatur corporis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est fugit provident, labore expedita nostrum laborum nesciunt! Assumenda inventore repudiandae dignissimos animi autem, dolorem sint, incidunt officia quam porro, perspiciatis fuga. 
     </div> 

    </div> <!-- end of content --> 

    </section> <!-- end of container --> 

    </body>

contact.html，bio.html等等都是这样about.html

而且，这里的相关CSS：

#container { 
    height: 100vh; 
    width: 100vw; 
    background-color: white; 
    text-align: center;} 

#contact { 
     top: 30%; 
     background-color: yellow; 
     padding: 50px 50px;} 

#about { 
    transform: translateY(60%); 
    background-color: red; 
    padding: 50px 50px;} 

#bio { 
     transform: translateY(60%); 
     background-color: blue; 
     padding: 50px 50px;} 

#gallery { 
     transform: translateY(60%); 
     background-color: green; 
     padding: 50px 50px;}

我的问题是，当我尝试的div的内容与“约” ID定位，“接触”，“容器”等...的div不会得到安置。当我将top财产联系到30%时，div就不会移动并且卡在页面的顶部。

我设法使用transform来定位其他div，但这似乎是一个黑客。这样做的正确方法是什么？感谢您的时间。

来源

2017-04-17 Paul

这与AJAX无关。

如果你想与top定位元素（一个或多个），bottom，left，或者right，元素（一个或多个）也必须有自己的position属性集（值可以是absolute，relative和fixed），以便他们采取脱离正常的文档流程。

详情请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/position。

这里有一个简单的例子：

div { 
 
    position:absolute; 
 
    width:100px; 
 
    height:100px; 
 
} 
 

 
.one { 
 
    top:50px; 
 
    left:100px; 
 
    background-color:red; 
 
} 
 

 
.two { 
 
    top:150px; 
 
    left:50px; 
 
    background-color:green; 
 
} 
 

 
.three { 
 
    top:50px; 
 
    left:200px; 
 
    background-color:yellow; 
 
} 
 

 
.four { 
 
    top:150px; 
 
    left:150px; 
 
    background-color:blue; 
 
}

<div class="one">One</div> 
 
<div class="two">Two</div> 
 
<div class="three">Three</div> 
 
<div class="four">Four</div>

来源

2017-04-17 19:33:02

回答

相关问题