Question

我正在努力解决从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;}

我遇到的问题是当我尝试定位id为＆＃34; div＆＃34;，＆＃34; contact＆＃34;，＆＃34; container＆＃34;等等... divs不会被定位。当我将top属性与30%联系起来时，div刚刚移动并停留在页面顶部。

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

Answer 1

这与AJAX无关。

如果您希望使用top，bottom，left或right定位元素，则元素也必须具有{{1}属性集（值可以是position，absolute和relative），以便它们从正常的文档流中取出。

有关详细信息，请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/position。

这是一个简单的例子：

＆＃13;

fixed

＆＃13;

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; 
}

＆＃13;

元素定位

1 个答案: