Looking for help positioning text over svg : web_design

By Prosyscom
In March 19, 2018
112 Views

[ad_1]

Hey all, I’m working on a project to create a tic tac toe game. I’m supposed to create a few elements and position them and navigating the CSS has proved a bit confusing for me just because I have less practice here. I would love some advice or at least a nudge in the right direction.

I am trying to take the following <header> and have the <h2> appear on top of the <svg>.

HTML:

<header>
  <h1>Tic Tac Toe</h1>
  <ul>
    <li class="players" id="player1">
      <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 42 42" version="1.1"></svg>
      <h2>Player 2</h2>
    </li>
    <li class="players" id="player2">
      <svg xmlns="http://www.w3.org/2000/svg" width="42" height="43" viewBox="0 0 42 43" version="1.1"></svg>
      <h2>Player 2</h2>
    </li>
  </ul>
</header>

CSS:

.players {
  color: rgba(0, 0, 0, 0.2);
  text-align: center;
  position: absolute;
  top: 1rem;
  width: 35%;
  padding: 1.25em 0 1em;
  outline: 1px solid #ccc;
  transition: 1s; }
  .players h2 {
    color: rgba(0, 0, 0, 0.5);
    z-index: 999999; }
  .players:first-child {
    left: 2.5%; }
  .players:last-child {
    right: 2.5%; }

GitHub repo here. Contains a link to the live version.

From what I’ve read, I believe I need to do something along the lines of ‘h2, svg {position: relative;’ then making h2 z-index higher than svg, but when I do the .players div loses it’s structure and collapses. Is that correct and I just need to reproduce the structure or is there some way to make this happen while keeping svg position as absolute? Followup, is <h2> fine or would something like <label> be easier to work with? Thanks in advance!

EDIT: formatting

[ad_2]

قالب وردپرس