CODEWITHSUNDEEP
htmlcss
Niyoj oli
Niyoj oli

Reputation: 342

Aligning INPUT over div perfectly

I want to make a search bar that activates on hover else it does not appears. For this I tried many times but the code didn't work well because i am beginning css for last few months. I want them to be perfectly aligned i.e. the div should disappear and search bar must cover the exact portion which was covered by the div.

I have already tried using padding and the css margins but it didn't work perfectly as per i want when the screen size and width changes.

.element1, .element2, .element3, .element4, .element5, .element6, .element7 {
    background: -webkit-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* Chrome 10+, Saf5.1+ */
    background:    -moz-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* FF3.6+ */
    background:     -ms-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* IE10 */
    background:      -o-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* Opera 1        1.10+ */
    background:         linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* W3C */
    border-radius:15%;
    max-height:110px;
    width: 7.2rem;
    font-family:"Nuntino";
    color: white;
    display:flex;
    opacity: 0.7;
    box-shadow:0.5px 0.5px 0.5px 0.5px #3A6073;
    text-align:center;
    align-items: center;
    justify-content: center;
}
<div class="Box">                                                
  <div class="element1" ><h1>Y</h1></div>
  <div class="element2" ><h1>O</h1></div>
      <div class="element3" ><h1>J</h1></div>
    <div class="element4" ><h1>A</h1></div>
      <div class="element5" ><h1>N</h1></div>
    <div class="element6" ><h1>A</h1></div>
</div>
<input type="text" />

Upvotes: 0

Views: 43

Answers (1)

Rohit Kaushik
Rohit Kaushik

Reputation: 1302

Use position:reative property to your div and input type the Apply margin and padding if this not work then use also overflow:hidden with position relative

Upvotes: 1

Related Questions