Слои 3+ HTML-объектов - PullRequest
Новая
       10

Слои 3+ HTML-объектов

0 голосов
/ 03 марта 2019

Как вы можете наложить несколько слоев HTML-объектов в CSS?Мой код не работаетСлои с div и изображениями, но я пытаюсь сделать p-тэг, чтобы наложить поверх изображения ячеек, чтобы представить количество таким образом элемента, мой код выглядит следующим образом: 

html, body {
    background: lightslategray;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;


}
#pengame {
    position: relative;
    width: 100%;
    height: 100%;
}

#pengame canvas {
    position: absolute;
    image-rendering: auto;
    object-fit: none;
}
#ingamechat{
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;

}
#leaderboard{
    position: absolute;
    display: none;
    top: 1.8%;
    right: 100px;
    background: rgb(50,50,50,0.4);
    border-radius: 10px;
    color: white;
}
#inventory{
    position: absolute;
    display: block;
    top: 10%;
    left: calc(1.3% + 320px);
    background: rgb(50,50,50,0.4);
    border-radius: 10px;
    color: white;
    padding: 0px 15px;
    width: 300px;
    max-width: 400px;
    height: 70%;
    max-height: 70%;
    overflow: scroll;
    -webkit-user-select: none; 

}
.td{
    padding:5px;
    position: relative;
    max-width: 55px;
    max-height: 55px;
}

input[type=text] {
    width: 100%;
    padding: 4px 5px;
    box-sizing: border-box;
    color: white;
    opacity: 0.5;
    background: transparent;
    border: none;
  }
  input:focus {
    outline: none;
}


#infobox{
    position: absolute;
    display: block;
    top: 1.8%;
    left:1%;
    max-width: 300px;
    background: rgb(50,50,50,0.4);
    padding: 0px 10px;
    border-radius: 25px;
    color: white;
    
}
#boption{
 height: 35px;
 width: 35px;
 padding: 5px 4px; 
 border-radius: 10px;
 -webkit-user-select: none; 
}
#shopicon{
    position: absolute;
    display: block;
    top: 1.8%;
    right: 15px;
    background: rgb(50,50,50,0.4);
    border-radius: 10px;
}
#shopicon :hover{
    position: absolute;
    display: block;
    top: 1.8%;
    right: 0%;
    background: rgb(200,200,200,0.4);
    border-radius: 10px;
}
#invetoryitem{
    --displayc: rgb(50,200,50,0.4);
    display: block;
    background: rgb(50,50,50,0.4);
    height: 45px;
    width: 45px;
    padding: 5px 4px; 
    border-radius: 10px;
}
#invetorypic{
    height: 45px;
    width: 45px;
}
#invetoryitem :hover{
    background: rgb(200,200,200,0.4);
    border-radius: 10px;
}
#invnumber{
display: block;
position: absolute;
color: black
}
canvas {
    background-color: transparent;
}
<div id="pengame">
<div id="inventory">
    <h2>Inventory</h2>
    <table id="myitems">
    <tr>
    <td>
    <div id="invetoryitem" > <img id="invetorypic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image"/></div> <p id="invnumber">1</p>
    </td>
    </tr>
    </table>
</div>
</div>

Этот код является хорошим представлением того, как выглядит мой "инвентарь"

1 Ответ

0 голосов
/ 03 марта 2019

Улучшение HTML

Я собираюсь сосредоточиться исключительно на области инвентаря, а не на общем макете страницы, что, вероятно, требует своего помощника.Вот некоторые важные сведения о следующем коде:

  • Попробуйте использовать ul вместо table.Вы представляете список предметов, поэтому ul имеет наиболее смысловой смысл здесь
  • Используйте flexbox для макета списка и его элементов
  • Так как вы хотите инвентарный номер запасаВверху изображения (внизу справа) вы должны сначала создать относительный контейнер, в который их абсолютно поместите.Мы установим каждый li на position: relative

#inventory-items {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  width: 300px;
  background-color: rgba(0, 0, 0, .2);
}

.inventory-item {
  position: relative;
  border: 1px solid transparent;
}

.inventory-stock {
  position: absolute;
  bottom: 5px;
  right: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, .7);
  color: white;
  display: inline-block;
  padding: 1px 2px;
  text-align: center;
  font-size: 90%;
}

.invetory-pic {
  max-width: 50px;
}
<div id="inventory">
  <h2>Inventory</h2>
  <ul id="inventory-items">
    <li class="inventory-item">
      <img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
      <span class="inventory-stock">1</span>
    </li>
    <li class="inventory-item">
      <img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
      <span class="inventory-stock">5</span>
    </li>
    <li class="inventory-item">
      <img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
      <span class="inventory-stock">121</span>
    </li>
    <li class="inventory-item">
      <img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
      <span class="inventory-stock">1000</span>
    </li>
    <li class="inventory-item">
      <img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
      <span class="inventory-stock">10</span>
    </li>
    <li class="inventory-item">
      <img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
      <span class="inventory-stock">5</span>
    </li>
    <li class="inventory-item">
      <img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
      <span class="inventory-stock">5</span>
    </li>
    <li class="inventory-item">
      <img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
      <span class="inventory-stock">5</span>
    </li>
  </ul>
</div>

jsFiddle

Работа с существующим HTML

Чтобы оставить свой код в основном как естьи сделайте необходимые дополнения:

  • конвертируйте id s в class es (дубликаты id s недействительны HTML)
  • Переместите инвентарный номервнутри контейнера, содержащего изображение 

html,
body {
  background: lightslategray;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

#pengame {
  position: relative;
  width: 100%;
  height: 100%;
}

#pengame canvas {
  position: absolute;
  image-rendering: auto;
  object-fit: none;
}

#ingamechat {
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

#leaderboard {
  position: absolute;
  display: none;
  top: 1.8%;
  right: 100px;
  background: rgb(50, 50, 50, 0.4);
  border-radius: 10px;
  color: white;
}

#inventory {
  position: absolute;
  display: block;
  top: 10%;
  left: calc(1.3% + 320px);
  background: rgb(50, 50, 50, 0.4);
  border-radius: 10px;
  color: white;
  padding: 0px 15px;
  width: 300px;
  max-width: 400px;
  height: 70%;
  max-height: 70%;
  overflow: scroll;
  -webkit-user-select: none;
}

.td {
  padding: 5px;
  position: relative;
  max-width: 55px;
  max-height: 55px;
}

input[type=text] {
  width: 100%;
  padding: 4px 5px;
  box-sizing: border-box;
  color: white;
  opacity: 0.5;
  background: transparent;
  border: none;
}

input:focus {
  outline: none;
}

#infobox {
  position: absolute;
  display: block;
  top: 1.8%;
  left: 1%;
  max-width: 300px;
  background: rgb(50, 50, 50, 0.4);
  padding: 0px 10px;
  border-radius: 25px;
  color: white;
}

#boption {
  height: 35px;
  width: 35px;
  padding: 5px 4px;
  border-radius: 10px;
  -webkit-user-select: none;
}

#shopicon {
  position: absolute;
  display: block;
  top: 1.8%;
  right: 15px;
  background: rgb(50, 50, 50, 0.4);
  border-radius: 10px;
}

#shopicon :hover {
  position: absolute;
  display: block;
  top: 1.8%;
  right: 0%;
  background: rgb(200, 200, 200, 0.4);
  border-radius: 10px;
}

.invetoryitem {
  --displayc: rgb(50, 200, 50, 0.4);
  display: block;
  background: rgb(50, 50, 50, 0.4);
  height: 45px;
  width: 45px;
  padding: 5px 4px;
  border-radius: 10px;
}

.invetorypic {
  height: 45px;
  width: 45px;
}

.invetoryitem :hover {
  background: rgb(200, 200, 200, 0.4);
  border-radius: 10px;
}

canvas {
  background-color: transparent;
}

.invetoryitem {
  position: relative;
}

.invnumber {
  position: absolute;
  bottom: -12px;
  right: 4px;
  color: black;
  pointer-events: none;
}
<div id="pengame">
  <div id="inventory">
    <h2>Inventory</h2>
    <table id="myitems">
      <tr>
        <td>
          <div class="invetoryitem"> <img class="invetorypic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" />
            <p class="invnumber">1</p>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="invetoryitem"> <img class="invetorypic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" />
            <p class="invnumber">21</p>
          </div>
        </td>
      </tr>
    </table>
  </div>
</div>

jsFiddle

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...