How to position a text over an icon?-CodePudding

I've already found many vlogs to align them vertically or horizontally, but what I am looking for is shown below in this image. I wanted to take a magnifying glass and add different alphabets in it according to case.

https://i.stack.imgur.com/jEcMM.png

CodePudding user response：

I think you just need to set the position propertie of the magnifying glass as relative and the alphabets inside as absolute and then handle the logic of showing each alphabet according to your case scenario for example:

**html**
<div >
 <div >
    <div >A</div>
 </div>
</div>

**css**
.glass {
width: 100px;
height: 100px;
position: relative;
}
.alphabet {
position: absolute;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

**javascript**

const alpahbetEl = document.querySelector('.alphabet')

let arrAlphabet = [A,B,C,D,E]
let CurrentIndex = Math.floor(Math.random() * arrAlphabet.length)

alpahbetEl.innerHTML= `<p>${arrAlphabet[CurrentIndex]}</p>`

CodePudding user response：

https://playcode.io/970686

Create a div and give it a position relative.
Add the image of magnifying glass inside the div.
Add another element (eg, div) for the letter and give it a position of absolute. Then use top, left params to set them correctly inside magnifying glass.

When you set absolute position to an object it lets you position an object absolute to the last parent with relative position.

Please refer the playground link mentioned on top.

CodePudding user response：

Solution: You Need to use position relative to parent element and position absolute to child element. Index.html File

<!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>Stackoverflow Answer By Swapnil</title>
    <link rel="stylesheet" href="style.css" />
    <link
        href="../fontawesome-free-6.2.0-web/css/fontawesome.css"
        rel="stylesheet"
    />
    <link
        href="../fontawesome-free-6.2.0-web/css/brands.css"
        rel="stylesheet"
    />
    <link
        href="../fontawesome-free-6.2.0-web/css/solid.css"
        rel="stylesheet"
    />
</head>
<body>
    <i ></i>
    <p >A</p>
</body>
</html>

Style.css:

.icon {
position: relative;
font-size: 200px;
}

.character {
position: absolute;
font-size: 50px;
font-weight: bold;
text-align: center;
top: 5px;
left: 70px;
}