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: