html - 在图像上定位

标签 html css css-position

我在将某些元素添加到图像上时遇到了重大问题。我正在构建一个前端站点以最终迁移到 wordpress。它有四个页面，所有页面的顶部标题下方都有一个图像。完成的版本需要看起来像这样 - PSD Version

这就是我所在的位置(图像故意不同)- Coded version

这是其中一个页面，但所有页面都存在与页面底部的“查看更多/showreel”元素相同的问题，我认为这也阻碍了右上角的 anchor 链接。

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

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

(上面的 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;
}

最佳答案

除了一些与您自己的基本样式冲突之外，您遇到的许多问题都与页面结构有关。我建议使用 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;
}

关于html - 在图像上定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44831134/

上一篇：css - 容器的变换比例和子容器的逆变换比例

下一篇：php - 如何水平并排对齐两个简码元素

相关文章：

javascript - 修复了 fullpage.js 部分内的 div

javascript - HTML 地理位置推送通知

html - 使用 Bootstrap 4 的带有图标的 CSS 三 Angular 形按钮

javascript - Bootstrap 网格中的偶数列

html - 在基本 html/css 站点中正确对齐 div 元素

html - 使用 CSS 的 HTML <div> 的反常效果

javascript - HTML5 Canvas 文本调整大小、旋转和更改颜色

javascript - Bootstrap : set height of a div relative to the height of another div?

html - 无论表格中有两个输入框，提交按钮都不会对齐

html - 菜单未显示所有元素

©2024 IT工具网  联系我们