circumference on top of an image

Asked

Viewed 34 times

-1

Hello!

I am developing a carousel of images and would like to put in it circles on top of a specific place of the image. The problem is that my circumference does not appear. I tried to use the z-index to move the circumference up the image but still does not appear.

The goal of having this circumference, is to open a modal to talk a little bit about what the circumference is around.

 $('.carousel').slick({
      dots: false,
      infinite: true,
      slidesToShow: 6,
      slidesToScroll: 1,
      variableWidth: true,
    });
body {
    background-color: white;
}

.carousel {
    width: 1300px;
    margin: 0 auto;
}

.slick-slide {
    margin: 5px;
}

.slick-prev::before, .slick-next::before {
    color: black;
}

#circulo-modal {
    width: 80px;
    height: 80px;
    border: solid white 2px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: inline-block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.css" />
  <link rel="stylesheet" type="text/css"
    href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css" />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="/css/css.css">

</head>

<body>

  <div class="carousel">
    <div>
      <img src="img/primeira.jpg" alt="img-1" width="172px" />
      <div id="circulo-modal"></div>
    </div>
    <div>
      <img src="img/segunda.jpg" alt="img-2" width="159px" />
    </div>
    <div>
      <img src="img/terceira.jpg" alt="img-3" width="296px" />
    </div>
    <div>
      <img src="img/quarta.jpg" alt="img-4" width="296px" />
    </div>
    <div>
      <img src="img/quinta.jpg" alt="img-5" width="159px" />
    </div>
    <div>
      <img src="img/sexta.jpg" alt="img-6" width="166px" />
    </div>

    <div style="background-color: white; width: 172px;"></div>
    <div style="background-color: white; width: 159px;"></div>
    <div style="background-color: white; width: 296px;"></div>
    <div style="background-color: white; width: 296px;"></div>
    <div style="background-color: white; width: 159px;"></div>

  </div>

  <!-- Modal 1 -->
  <div class="modal fade" id="exampleModalCenter1" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">À volta de frades e monges</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-12">
              <img class="img-fluid" src="/img/modalimg1.jpg" alt="">
            </div>
            <div class="col-12">
              <br>
              <p>Frades e monges estão representados nos dois painéis à esquerda. Os que trajam de branco seriam
                cisterclenses ou agostinhos, a dúvida é motivo de discussão. Dois têm barretes e, um, longas barbas.
                Poderá ser um barbati, frade que prestou voto de obediência mas não vivia em clausura.</p>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal 2 -->
  <div class="modal fade" id="exampleModalCenter2" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Franciscano com rosário nas mãos</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-12">
              <img class="img-fluid" src="/img/modalimg2.jpg" alt="">
            </div>
            <div class="col-12">
              <br>
              <p>A figura de um franciscano, com os joelhos e cotovelos no chão, representa uma das imagens mais
                marcantes do painel.<br> Das mãos pende um rosário (uma repetição de ave-marias e padre-nossos) que era
                rezado de joelhos, como o demonstrado.</p>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal 3 -->
  <div class="modal fade" id="exampleModalCenter3" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Figura central representada a dobrar</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-12">
              <img class="img-fluid" src="/img/modalimg3.jpg" alt="">
            </div>
            <div class="col-12">
              <br>
              <p>Veste uma dalmática em vermelho e ouro, o que indica ser um diácono. A figura é, para a maioria dos
                autores, São Vicente, duplamente representados. Está ligado à Historia de Portugal e de Lisboa e
                tornou-se patrono das conquistas ultramarinas.</p>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal 5 -->
  <div class="modal fade" id="exampleModalCenter5" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">D. Henrique, o Navegador, retratado</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-12">
              <img class="img-fluid" src="/img/modalimg4.jpg" alt="">

            </div>
            <div class="col-12">
              <br>
              <p>Esta foi a primeira figura a ser identificada pelo historiador Joaquim de Vasconcelos, em 1895. De
                bigode e chapeirão borgonhês, foi possivel devido às semelhanças com o retrato de D. Henrique, o
                Navegador, filho de D. João I, que se encontra na Crónica da Conquista da Guiné, de Gomes Eanes de
                Azurara. </p>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal 6 -->
  <div class="modal fade" id="exampleModalCenter6" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Representação de um reliquia</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-12">
              <img class="img-fluid" src="/img/modalimg5.jpg" alt="">
            </div>
            <div class="col-12">
              <br>
              <p>O osso que este homem vestido de vermelho (cor usada pelos vereadores de Lisboa) deposita num pano
                verde é um fragmento de crânio, a representação de uma reliquia corporal de São Vicente. Mas há quem
                defenda ser de Santo António. </p>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
    crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.js"></script>

</body>

</html>

html css

1 answer

1


Solution:

Place position: relative in the div containing the div circle.

Motive:

The position works with respect to an ancestral element that has not position: static (which is the standard). In the latter case the positioning will take place having as reference the block html.

From what I noticed the div of the circle is being positioned having as reference the div with class slick-track. And the combination in this class of width with transform made him get off the screen.

See the MDN article: https://developer.mozilla.org/en-US/docs/Web/CSS/position

See also this: https://medium.com/trainingcenter/css-basics-position-absolute-e-relative-d725a2fcc8e

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.