定位在图像上

时间：2017-06-29 17:03:38

标签： html css css3 css-position

我在解决图像上的某些元素时遇到了重大问题。我建立一个前端网站，最终转移到wordpress。它有四个页面，所有页面的顶部都有一个图像。完成版本需要看起来像这样 - PSD Version

这就是我所处的地方（图片故意不同） - Coded version

这是其中一个页面，但所有这些页面都有相同的问题＆＃39;请参阅更多/ showreel＆＃39;页面底部的元素，我认为也阻碍了右下角的锚链接。

以下是我一直在使用的相关代码，我认为问题的一部分是我混淆了id和类的使用来识别不同页面上的元素。

＆＃13;
＆＃13; 
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
/* GENERAL */

body {
  max-width: 960px;
  margin: 0 auto 0 auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

div.container {
  max-width: 100%;
  margin: 0 auto 0 auto;
}


/* AGENCY PAGE */

section#agency {
  height: 400px;
  max-width: 100%;
  background: url(../images/VIDEO.jpg) center center no-repeat;
  background-size: 960px;
  background-position: center;
  position: relative;
}

#agency a {
  text-decoration: none;
  margin-right: 50px;
  color: #FFFFFF;
  position: absolute;
  background-color: #000000;
}

.text {
  float: left;
  margin-top: 50px;
  margin-bottom: 50px;
  left: 100px;
}

.text p {
  font-size: 10px;
  color: #FFFFFF;
}

.text h1,
h2 {
  color: #FFFFFF;
  margin: 0;
  padding: 0;
  border: 0;
}

.text h2 {
  line-height: 5px;
  font-size: 25px;
  font-weight: 200;
}

.text h1 {
  font-size: 50px;
  margin-bottom: 40px;
}

.showreel {
  height: 50px;
  width: 960px;
  position: absolute;
  background-color: black;
  bottom: 0;
  padding: 0 30px;
  justify-content: space-between;
}

.showreel,
.showreel>div {
  display: flex;
  align-items: center;
}

.showreel p {
  font-size: 15px;
  font-weight: normal;
  margin: 0;
  color: #ffffff;
}

.showreel i {
  color: #ffffff;
}

.seemore i {
  margin-right: 30px;
}

.seeour i {
  margin-left: 30px;
}
＆＃13; 
<section id="agency">
  <div class="container">
    <div class="text">
      <h2>VIDEO & ANIMATION</h2>
      <h1>FOR AGENCY</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque
        facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus
        ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis
        lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p>
    </div>
    <a href="business.html">
      <p>I'm a business</p>
    </a>
  </div>
  <div class="container showreel">
    <div class="seemore">
      <span class="fa-stack fa-lg">
                        <i class="fa fa-circle fa-stack-2x" style="color:#fff"></i>
                        <i class="fa fa-chevron-down fa-stack-1x" style="color: #000000;"></i>
                    	</span>
      <p>SEE MORE</p>
    </div>
    <div class="seeour">
      <p>SEE OUR SHOWREEL</p>
      <i class="fa fa-play-circle fa-3x" aria-hidden="true"></i>
    </div>
  </div>
</section>
＆＃13;
＆＃13;
＆＃13;

（上面的html专门用于下面的代理商页面，其他页面使用相同的类，但部分使用不同的ID）

更新 -

这是来自页面下方的CSS - 

section#products {
    height: 700px;
    max-width: 100%

}



.agencyproducts {
    position: relative;
    display: inline-block;
    text-align: center;

}

.agencyproducts p {
    text-align: center;
    margin: 30px;
}

.agencyproducts img {

    width: 70px;
    height: 70px;
    position: relative;
    line-height: 1;
    top: 50%;

}

figure {
    text-align: center;
    display: inline-block;
    max-width: 80px;
    height: 100px;
    vertical-align: top;
    margin: 5px;
    font-size: 9px;
    margin-bottom: 60px;

}

figure img {
    padding-bottom: 5px;
}

.four {
    padding: 0;
    margin: 0;
    border: 0;
}

.images img {

    margin-left: 20px;
    padding: 10px;

}

.seemore {
    font-size: 12px;
    margin-top: 20px;
    margin-left: 45%;
}

section#facebook {
    height: 250px;
    max-width: 100%;
    background-color: #F0F0F0;
}

.socialmedia {
    position: relative;
    display: block;
    text-align: center;
    top: 125px;

}

.socialmedia i {

    position: relative;
    font-size: 20px;
    line-height: 1;
    top: 50%;
    color: #000000;

}

.socialmedia p {

    display: block;
    text-align: center;
    font-size: 10px;

}

section#form {
    height: 300px;
    max-width: 100%;
}


section#form h2 {
  font-size: 15px;
  margin-top: 50px;
}

span {
    color: #d3d3d3;
}
.phone img, .phone p, .email img, .email p {
  float: left;
}
.email {
  margin-top: 10px;
}
.phone p, .email p {
  margin: 3px 0 0 10px;
}
.phone::after, .email::after { /*clearfix*/
  content: '';
  display: table;
  clear: both;
}

form {
  height: 200px;
  width: 400px;
  margin-right: 50px;
  margin-top: 50px;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
}

section#form div.row {
  display: flex;
  width: 100%;
}

section#form div.row input {
  margin-left: 5px;
}
section#form div.row input:first-child {
  margin-left: 0;
}

input[type=text],
input[type=email] {
  background: #E8E8E8;
  font-size: 10px;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  padding: 0;
  margin-bottom: 5px;
  padding: 6px 12px;
}

textarea {
  resize: none;
  font-size: 10px;
  background: #E8E8E8;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  padding: 6px 12px;
  margin-bottom: 5px;
}

input[type=submit] {
  background: #1ba4dd;
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  width: 100%;

}

input[type=submit]:hover {
  background: #00bfff;
}

3 个答案:

答案 0 :(得分：0)

我猜你的主题中有更多的css是冲突的。检查这个小提琴，我试图定位https://jsfiddle.net/5t8nnu6r/ 

 /* GENERAL */

  body {
    max-width: 960px;
    margin: 0 auto 0 auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  }

  div.container {
    max-width: 100%;
    margin: 0 auto 0 auto;
  }
  /* AGENCY PAGE */

  section#agency {
    height: 400px;
    max-width: 100%;
    background: url(https://static.pexels.com/photos/122400/pexels-photo-122400.jpeg) center center no-repeat;
    background-size: 960px;
    background-position: center;
    position: relative;
  }

  #agency a {
    text-decoration: none;
    margin-right: 50px;
    color: #FFFFFF;
    position: absolute;
    background-color: #000000;
  }

  .text {
    float: left;
    margin-top: 50px;
    margin-bottom: 50px;
    left: 100px;
  }

  .text p {
    font-size: 10px;
    color: #FFFFFF;
  }

  .text h1,
  h2 {
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .text h2 {
    line-height: 5px;
    font-size: 25px;
    font-weight: 200;
  }

  .text h1 {
    font-size: 50px;
    margin-bottom: 40px;
  }

  .showreel {
    height: 50px;
    width: 960px;
    position: absolute;
    background-color: black;
    bottom: 0;
    padding: 0 30px;
    justify-content: space-between;
  }

  .showreel,
  .showreel > div {
    display: flex;
    align-items: center;
  }

  .showreel p {
    font-size: 15px;
    font-weight: normal;
    margin: 0;
    color: #ffffff;
  }

  .showreel i {
    color: #ffffff;
  }

  .seemore i {
    margin-right: 30px;
  }

  .seeour i {
    margin-left: 30px;
  }

  #agency a.float-link {
    position: absolute;
    margin: 0px;
    right: 0px;
    background: rgba(0, 0, 0, 0.39);
    padding: 3px 10px;
    text-transform: uppercase;
    font-family: sans-serif;
    margin-right: 50px;
  }

  .showreel {
    box-sizing: border-box;
  }

  #agency a.float-link p {
    margin: 0;
  }

  .text {
    position: absolute;
    left: 500px;
    margin-top: 96px;
  }

  .text h1 {
    margin-bottom: 20px;
  }

  .text p {
    font-size: 15px;
    font-family: sans-serif;
  }

和

<section id="agency">
  <div class="container">
    <div class="text">
      <h2>VIDEO &amp; ANIMATION</h2>
      <h1>FOR AGENCY</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque
        facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus
        .

      </p>
    </div>
    <a href="business.html" class="float-link">
      <p>I'm a business</p>
    </a>
  </div>
  <div class="container showreel">
    <div class="seemore">
      <span class="fa-stack fa-lg">
                    <i class="fa fa-circle fa-stack-2x" style="color:#fff"></i>
                    <i class="fa fa-chevron-down fa-stack-1x" style="color: #000000;"></i>
                    </span>
      <p>SEE MORE</p>
    </div>
    <div class="seeour">
      <p>SEE OUR SHOWREEL</p>
      <i class="fa fa-play-circle fa-3x" aria-hidden="true"></i>
    </div>
  </div>
</section>

答案 1 :(得分：0)

这就是问题

.seemore {
    font-size: 12px;
    margin-top: 20px;
    margin-left: 45%;
}

删除两个边距，不确定这是什么

.seemore {
    font-size: 12px;
}

如果第二个.seemore用于某个地方的另一个元素，那么你需要更具体地定位，通过添加一个父选择器将在这种情况下做到这一点

答案 2 :(得分：0)

您遇到的许多问题都与页面结构有关，此外还有一些与您自己的基本样式冲突的基本样式。我建议使用css reset文件来防止这种情况发生，否则你必须手动将某些属性设置为'0'。

你的一些css结构也令人困惑。实际上，您不需要在包含的div ID中声明div ID以使其工作。这种语法风格更适用于需要在该上下文中设置样式的div的特定元素。像'a'或'img'标签一样。

这是我的解决方案的代码集https://codepen.io/morganfens/pen/RgQGaw

HTML 

<section id="agency">
  <div class="container">
    <a href="business.html">
      I'm a business
    </a>
    <div class="text">
      <h2>VIDEO & ANIMATION</h2>
      <h1>FOR AGENCY</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque
        facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus
        ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis
        lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p>
    </div>

  </div>
  <div class="container showreel">
    <div class="seemore">
      <span class="fa-stack fa-lg">
                    <i class="fa fa-circle fa-stack-2x" style="color:#fff"></i>
                    <i class="fa fa-chevron-down fa-stack-1x" style="color: #000000;"></i>
                    </span>
      <p>SEE MORE</p>
    </div>
    <div class="seeour">
      <p>SEE OUR SHOWREEL</p>
      <i class="fa fa-play-circle fa-3x" aria-hidden="true"></i>
    </div>
  </div>
  </div>
</section>

CSS 

body {
  width: 960px;
  margin: 0 auto 0 auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

.container {
  margin: auto;
  padding-left:10px;
  padding-right:10px;
}

/* AGENCY PAGE */

#agency {
  height: 400px;
  width: 100%;
  background: url(http://www.thephoblographer.com/wp-content/uploads/2015/05/Chris-Gampat-the-Phoblographer-X3-ND-filter-six-stop-review-sample-photos-5-of-8ISO-4001-2500-sec-at-f-2.0-680x453.jpg) center center no-repeat;
  background-size: 100%;
  background-position: center;
  position: relative;
}

#agency a {
  text-decoration: none;
  color: #FFFFFF;
/*   position: static; */
  float: right;
  background-color: #000000;
  padding:5px;
  padding-left:10px;
  padding-right: 10px;
  width:auto;
  white-space: nowrap;
}

.text {
  float: left;
  margin-top: 50px;
  margin-bottom: 50px;
  left: 100px;
}

.text p {
  font-size: 10px;
  color: #FFFFFF;
}

.text h1, h2 {
  color: #FFFFFF;
  margin: 0;
  padding: 0;
  border: 0;
}

.text h2 {
  line-height: 5px;
  font-size: 25px;
  font-weight: 200;
}

.text h1 {
  font-size: 50px;
  margin-bottom: 40px;
}

.showreel {
  height: 50px;
  width: 100%;
  padding:0px;
  position: absolute;
  background-color: black;
  bottom: 0;
  justify-content: space-between;
}

.showreel, .showreel > div {
  display: flex;
  align-items: center;
}

.showreel p {
  font-size: 15px;
  font-weight: normal;
  margin: 0;
  color: #ffffff;
}

.showreel i {
  color: #ffffff;
}

.seemore i {
  margin-right: 30px;
}

.seeour i {
  margin-left: 30px;
}
相关问题
最新问题