Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

61
Vistas
How to Position Child's child when parent is using Flex

I am trying to position to absolute inside my Child's child element ( or you may say grandchild element). Problem I am facing it doesnot let me to do as, as in my first div I am using Flex.Please see the code below to understand:

<template>
  <div>
    <div class="markar-items">
      <!-- parent div -->
      <div class="marker-circle" :class="someMoreClass" @click="onClick">
        <!-- child div -->
        <div v-if="text" class="marker-text">{{ text }}</div>
        <div v-if="!text" class="marker-no-text">{{show  other icons}}</div>
      </div>
      <div class="pin"></div>
      <div class="pin-circle"></div>
    </div>
  </div>
</template>


And now in my CSS style:

.markar-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.marker-circle {
  position: "relative";
  background: green;
  width: 40px;
  height: 40px;
  border: 3px solid black;
  border-radius: 50%;
  cursor: pointer;
  background-color: red;
}

.marker-text {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0.8em 1.2em;
  color: white;
  background-color: darkcyan;
  font-size: 14px;
  font-weight: bold;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); 
   
}

.marker-no-text {
  margin: 5px;
}
But if I use this two line of css in my marker-text, then it works, 
Why is that and nor working with position relative and absolute :

*.marker-text {
   text-align: center;
   margin-top: 8px;
}*

Image below:

enter image description here

7 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos