Question

我正在制作我的第一个网页，但我在定位元素方面遇到了麻烦。当我调整浏览器大小时，它们会相互重叠。标题位于绝对位置，但这意味着它与顶部的图像重叠。我不能通过任何其他方式使它到位。有人可以帮忙吗？

我的问题第一次没有得到妥善回答。

＆＃13;

.wrapper {
  margin: 0 auto;
  max-width: 1024px;
  min-width: 1024px;
  min-height: 760px;
  max-height: 760px;
  padding-right: 15px;
  padding-left: 15px;
  border: 5px solid red;
}

.header img {
  min-width: 77%;
  max-width: 77%;
  min-height: 200px;
  max-height: 200px;
  position: relative;
  left: 23%;
}

#cont {
  position: relative;
  width: 200px;
  height: 200px;
  border: 5px solid red;
}

#cont .header {
  position: relative;
  width: 200px;
  height: 200px;
  border: 5px solid red;
}

.top-left {
  position: absolute;
  top: 11px;
  left: 23%;
  color: teal;
  font-size: 63px;
  min-width: 100px;
  max-width: 100px;
  min-height: 100px;
  max-height: 100px;
  font-family: Helvetica;
  text-align: center;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link href="./new 1.css" type="text/css" rel="stylesheet">
</head>

<body>
  <div class="wrapper">
    <div class="header">
      <img src="C:\Users\Duncan\Desktop\Coding\Images\guitar_banner.jpg" alt="Dunc's guitar lessons in Isleworth" />

      <div id="cont">
        <div class="top-left">Dunc's<br/> Guitar<br/> Lessons</div>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

由于

Answer 1

你试过这样的事吗？如果我错了，请告诉我。

这是你的css代码。

.wrapper {
    margin: 0 auto;
    max-width: 1024px;
    min-width: 1024px;
    min-height: 760px;
    max-height: 760px;
    padding-right: 15px;
    padding-left: 15px;
    border: 5px solid red;
    }

    .header img {
    min-width: 77%;
    max-width: 77%;
    min-height: 200px;
    max-height: 200px;
    position: relative;
    left: 23%;
    }

    #cont {
    position: absolute;
    z-index:1000;
    width: 200px;
    height: 200px;
    border: 5px solid red;
    }

    #cont .header {
    position: relative;
    width: 200px;
    height: 200px;
    border: 5px solid red;
    }

    .top-left {
    position: absolute;
    top: 11px;
    left: 23%;
    color: teal;
    font-size: 63px;
    min-width: 100px;
    max-width: 100px;
    min-height: 100px;
    max-height: 100px;
    font-family: Helvetica;
    text-align: center;
}

这是你的HTML代码。

    <div class="wrapper">
        <div class="header">
            <div id="cont">
            <div class="top-left">Dunc's<br/> Guitar<br/> Lessons</div>
        </div>
            <img src="C:\Users\Duncan\Desktop\Coding\Images\guitar_banner.jpg" />
        </div>
    </div>

希望这对你有所帮助。祝你好运。

CSS不会留下来

1 个答案: