The Divs pile one on top of the other

I am trying to position the second div below the first div instead of stacking on top of it and making the first div invisible. How can I achieve this?

.shop {
    width: 100%;
    height: 1000px;
    background-color: #ffffff;
    position: relative;
    justify-content: center;
    display: flex;
}
.bell {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
<div class="shop"></div>
<div class="bell">
        <img src="bell.png" alt="">
    
  </div>

htmlcss

Answer №1

Does this solution match what you had in mind? :)

.store {
  width: 100%;
  height: 1000px;
  background-color: #000;
  justify-content: center;
  display: flex;
}

.bell {
  background-color: red;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

img{
  width : 30%;
}

<div class="store"></div>
<div class="bell">
        <img src="https://images.pexels.com/photos/1289845/pexels-photo-1289845.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
    
  </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for creating a website with an integrated, easy-to-use editing tool

Recently, I designed a website for a friend who isn't well-versed in HTML/CSS/JavaScript. He specifically requested that the site be custom made instead of using a web creator. Now, he needs to have the ability to make changes to the site without nee ...

javascripthtmlcsseditor

Dynamically align text in the center of an image, vertically

I'm trying to create a hover effect where an image and text are displayed in the center of the image when someone hovers over it. Here is how the HTML looks: <article> <div class="entry-content"> <a href="http://www.linktopost.com"> ...

htmlcss

Tips for showcasing a full body height background

I'm currently working on a project where I need to display random background images when the body loads. To achieve this, I've created a function. However, I'm facing an issue where the images are filling up the entire page, making it very l ...

javascripthtmlcssgoogle-chrome

jQuery autoscroll feature for Carousels added

I followed a tutorial to create a jQuery Carousel, but made some modifications. You can find the tutorial here. This is the code I have: (function ($) { $.fn.infiniteCarousel = function () { // Function to repeat a string function repeat(str, num ...

jqueryhtml

The display of treepanel response text on an extjs grid within a layout-browser is achieved through the use of the

I am attempting to showcase an ExtJS grid and tree within a layout-browser. The tree's response data is displayed in the ExtJS grid, which then dynamically refreshes. My goal is that when I click on a tree leaf, the data from that leaf should be displ ...

phphtmlmysqlajaxextjs4

eliminate gaps between hyperlinks using cascading style sheets

I developed a webapp for iOS which has a specific page containing a centered div with 3 buttons. Inside this div, there is a total of 460px with each link measuring as follows: the first and last are 153px while the middle one is 154px. The main issue ar ...

htmlcss

Tips for adding images using v-for in Vue 3

Having some trouble creating a set of images using a v-for loop, as it seems to be not recognizing the variables inside the tag. The picture is broken and the alt attribute just shows me {{ item.alt }}. Here is my HTML: <section class="our-technolo ...

htmlvue.jsfrontendvuejs3v-for

Discovering whether a link has been clicked on in a Gmail email can be done by following these steps

I am currently creating an email for a marketing campaign. In this email, there will be a button for users to "save the date" of the upcoming event. I would like to implement a feature that can detect if the email was opened in Gmail after the button is cl ...

javascriptjqueryhtmlcssgmail

Is there a way to prevent the text in my text boxes from staying there when I refresh the page?

Currently working on an HTML5 project with Javascript, here is a snippet of my code: Your inquiry <textarea type="text" name="phrase" id="phrase" cols="50" rows="5" placeholder="Write your text here. . ."></textarea> I am looking for a way ...

javascripthtmltextarea

Complete and automatically submit a form in a view using AngularJS

I have developed a basic AngularJS application that is functioning smoothly. Currently, I am looking to populate certain fields and submit the form directly from the view without requiring any user input. Below, you'll find some simplified JavaScrip ...

javascripthtmlangularjsforms

Transform the query results into clickable links

Is there a way to automatically turn specific results fetched from a MySQL $row into hyperlinks? For example, if I fetch the website Google.com in a search query, is there a method for making it an active hyperlink that goes directly to Google.com when cli ...

phphtml

The background image is failing to display, although other styles for the class or element are visible

Why won't the background image display, even though I have verified that the image path is correct and changing other properties like color or background color works just fine? Here is my CSS code snippet: .container { background-imag ...

htmlcssbackground-image

The child element is bigger than its parent due to the maximum height set. There is no visible overflow

My goal is to create a parent element with a maximum height, and have a child element fill this parent. If the content in the child exceeds the parent's dimensions, a scrollbar should appear. I attempted to achieve this by: div.parent { max-hei ...

htmlcss

Customizing HTML list headers using an external JavaScript function

Hi everyone, I've been working on a login page and I want to enhance the user experience by displaying the logged-in user's username at the top of the screen, which can then trigger a dropdown list upon clicking. To achieve this, I've writt ...

javascriptjqueryhtml

Rendering the page using ReactDOM.render

Just started with ReactJS, I'm struggling to figure out why my page isn't displaying anything - <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ...

javascripthtmlreactjs

I'm struggling to convert this vertical navigation bar into a horizontal layout using CSS

<nav class="navbar navbar-dark bg-dark sticky-top"> <a class="navbar-brand" href="#">I/H</a> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to update the div id by extracting the last digits from a number?

Is there a way to change the div ids using a function? Before: <div id="a_1">a1</div> <div id="b_1">b1</div> <div id="c_1">c1</div> <div id="d_1">d1</div> <button onclick="change()">Change</button& ...

javascriptjqueryhtml

Combining Python strings

I'm trying to understand the distinction between two statements. I need to display a variable in a <p> HTML tag. Both statements achieve the same outcome, but one is causing an error. The first statement that functions correctly: out += "</ ...

pythonhtml

To enhance the MUI v5 table row, simply apply a border when the mouse hovers

After working on creating a table with Material UI v5, I encountered an issue where I wanted to add a blue border to the table row when the mouse pointer hovered over it. I attempted several methods and did thorough research, but unfortunately, I was unab ...

javascripthtmlcssreactjsmaterial-ui

The color of the button in HTML5 will remain constant and not shift

I have several buttons that function like radio buttons - only one can be selected at a time: <button id="btn-bronze" name="btn-bronze" type="button" class="blue-selected">Bronze</button> <button id="btn-silver" name="btn-silver" type="butt ...

javascriptjqueryhtmlcss