Question

我一直在用CSS和HTML做一些练习，在创建页面布局时我遇到了这个问题，这是第一个代码。注意：下面的代码只是我在创建布局时遇到的问题的例子

 <!DOCTYPE html>
    <html>
    <head>
    <style>
        *
        {margin:0px;padding:0px;box-sizing:border-box;}
        #container
        {
            width:800px;
            position:relative;
            background-color:darkgray;
        }

        #temp
        {
            position: relative;
        }
        #content
        {
            position:absolute;
            top:100px;
            right:120px;
            width:200px;
            height:200px;
            border:1px solid yellow;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="temp">
            <img src="psp.jpg" alt="no imgage">
        <div id="content">
        <h1>
          Goku Vs Vegeta 
             <form>
                 <input type="text" placeholder="Start fighting" name="img">
             </form>   
             </h1>    
        </div>
        </div>
    </div>
</body>
</html>

上面的代码对我来说非常合适，无论我们增加还是减少浏览器的缩放，文字都保留在图像上，文本不会改变它的位置。

当我将容器宽度从像素更改为百分比时，问题就出现了，这是第二个代码。

<!DOCTYPE html>
  <html>
  <head>
  <style>
        *
        {margin:0px;padding:0px;box-sizing:border-box;}
        #container
        {
            width:100%;
            position:relative;
            background-color:darkgray;
        }

        #temp
        {
            position: relative;
        }
        #content
        {
            position:absolute;
            top:100px;
            right:120px;
            width:200px;
            height:200px;
            border:1px solid yellow;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="temp">
            <img src="psp.jpg" alt="no imgage">
        <div id="content">
        <h1>
          Goku Vs Vegeta 
             <form>
                 <input type="text" placeholder="Start fighting" name="img">
             </form>   
             </h1>    
        </div>
        </div>
    </div>
</body>
</html>

第二个代码的问题是，如果我们增加或减少浏览器的缩放，文本的位置将改变，它将不会相对于图像，而是查看浏览器的端口或容器，而不是图片。有人能告诉我如何解决这个问题吗？

JS小提琴：https://jsfiddle.net/30d2nqeL/

Answer 1

        * {
          margin: 0px;
          padding: 0px;
          box-sizing: border-box;
        }
        
        #container {
          width: 100%;
          position: relative;
          background-color: darkgray;
        }
        
        #temp {
position: relative;
          background-image: url('http://lorempixel.com/1336/768');
          background-size: cover;
          height: 400px;
          padding: 0 10vh;
        }
        
        #content {
position: absolute;
top: 50%;
margin-top: -100px;
right: 0;
margin-right: 10%;
          width: 200px;
          height: 200px;
          border: 1px solid yellow;
          background-color: rgba(255,255,255,.4);
        }
        
        #content h1 {
          text-align: center;
margin: 1em 0 1em 0;
          color: #000;
        }
#content form {
  text-align: center;
}

<div id="container">
  <div id="temp">
    <div id="content">
      <h1>Goku Vs Vegeta</h1>
      <form>
        <input type="text" placeholder="Start fighting" name="img">
      </form>
    </div>
  </div>
</div>

Answer 2

形式在h1 - 糟糕的做法。
使用css background-image。
检查flexbox。

* {
          margin: 0px;
          padding: 0px;
          box-sizing: border-box;
        }
        
        #container {
          width: 100%;
          position: relative;
          background-color: darkgray;
        }
        
        #temp {
          display: flex;
          align-items: center;
          flex-direction: row-reverse;
          background-image: url('http://lorempixel.com/1336/768');
          background-size: cover;
          height: 768px;
          padding: 0 10vh;
        }
        
        #content {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 200px;
          height: 200px;
          border: 1px solid yellow;
          background-color: rgba(255,255,255,.4);
        }
        
        #content h1 {
          text-align: center;
          margin: -.4em 0 1em 0;
          color: #000;

        }

<div id="container">
  <div id="temp">
    <div id="content">
      <h1>Goku Vs Vegeta</h1>
      <form>
        <input type="text" placeholder="Start fighting" name="img">
      </form>
    </div>
  </div>
</div>

如何使用位置作为绝对位置在图像上定位文本，而容器宽度为百分比

2 个答案: