Question

我试图将此图像添加到左下角但它仍然标题下方的标题。任何提示来解决这个问题？或者我哪里会出错？最后一个代码就是我想要获得的代码。

的jsfiddle

https://jsfiddle.net/fecr9w0t/#&togetherjs=ODnAazMkx8

HTML

<!DOCTYPE html>
<html>
       <head>
       <title> Home - A.Willi A.G</title>
       <link rel="stylesheet" href="index.css" type="text/css" />
       </head>
       <body>

       <h1 align="center">
       <a href="index.html"><img src="logo.png" alt="A.Willi A.G" /></a>
       </h1>

       <div class="menu_div">
       <ul>
       <li><a href="index.html">Home</a></li> 
       <li class="dropdown">
       <a href="#" class="dropbtn">Bewerber</a>
       <div class="dropdown-content">
       <a href="#">Info</a>
       <a href="#">Jobs</a>
       </div>
       </li>

       <li class="dropdown"><a href="#" class="dropbtn">Kunde</a>
       <div class="dropdown-content">
       <a href="personalverleih.html">Personalverleih</a>
       <a href="toolrental.html">Werkzeuge Mieten</a>
       <a href="referenzen.html">Referenzen</a>
       <a href="quali.html">Qulität, Sicherheit und Weiterbildung</a>
       </div>
       </li>
       <li><a href="kontakt.html">Kontakt</a></li>
       </ul>
       </div>

       <div class="fadein"> 
       <img src="welder1.png">
       <img src="welder2.png">
       <img src="welder3.png"> 
       </div>
       <div class="fadein img">
       </div>




       <img src="swissstaffing_sqs_logo_cmyk.png" alt="Swiss Staffing" >




</body>       
</html>

CSS

body { font-family: verdana; background:white ; color: white; }

.menu_div{background-color: #333; width:100%;}
ul {
    list-style-type: none;
    margin: 0 auto;
    display:table;
    padding: 0;
    z-index: 100;
    overflow: hidden;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: black;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

        @keyframes fade {
        0%   { opacity: 0; }
        11.11%   { opacity: 1; }
        33.33%  { opacity: 1; }
        44.44%  { opacity: 0; }
        100% { opacity: 0; }
}

    .fadein { position:absolute; height:102px; width:50px; outline: 1px solid blue; }
    .fadein img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
    .fadein img:nth-child(1) { animation-delay: 0s;  }
    .fadein img:nth-child(2) { animation-delay: 3s;  }
    .fadein img:nth-child(3) { animation-delay: 6s;  }

.menu_div { 
  position: relative;
  z-index: 0;
  border: dashed;
  height: 2.9em;
  margin-bottom: 0em;
  margin-top: 0em;
  z-index:1000;


}
.fadein { 
  position: relative;
  z-index: 3; 
  background: ;
  width: 100%;
  left: 1px;
  top: 0em;

  }

.fadein img{
    margin:0 auto;
    width: 100%;
    max-width: 4060px;
    min-width: 900px;
    max-height: 500%;
}

javascipt的

$("#slideshow > div:gt(0)").hide();

setInterval(function() {
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
}, 3000);

以下是我要修复的代码

<img src="swissstaffing_sqs_logo_cmyk.png" alt="Swiss Staffing" >

我尝试使用下面的代码但是在尝试对齐时它没有用

.container {
    position: relative;
}

.bottomright {
    position: absolute;
    bottom: 8px;
    right: 16px;
    font-size: 18px;
}

img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the bottom right corner:</p>

<div class="container">
  <img src="trolltunga.jpg" alt="Norway" width="1000" height="300">
  <div class="bottomright">Bottom Right</div>
</div>

Answer 1

如果你想将图像对齐到总是在页面上的某个位置，那么你必须给它＆＃34;位置：绝对＆＃34;然后你可以定义＆＃34; bottom：0;＆＃34;和＆＃34;左：0＆＃34;这将解决您的定位问题。

如果你只是让它相对于页面定位，如果你想让它完全定位在一个容器中，那么你必须给父容器＆＃34; position：relative＆＃34;

希望有所帮助！：）

Answer 2

设法通过添加

来修复它

   <img src="swissstaffing_sqs_logo_cmyk.png" height=80 style="position:fixed;bottom:0px;left:0px;z-index:999" />

为帮助人员欢呼

将图像png文件对齐到左下角的最佳方法是什么？

2 个答案: