Is there a way to position different objects above or below each other in HTML?-CodePudding

I'm new to coding so I would like to ask if there is an easy way to put certain objects below or above each other in HTML or CSS? If there is can you please explain how? I couldn't find any articles explaining this. Example Here

I'll answer any question to the best of my ability.

CodePudding user response：

The CSS includes default styling for the element itself, as well as separate styles for each of the two images.

 img {
 width: 300px;
 height: 250px;
 border: 1px solid black;
 background-color: silver;
 margin-right: 1em;
 object-fit: none;
 }

#object-position-1 {
object-position: 10px;
}

#object-position-2 {
object-position: 100% 10%;
}

Here we see HTML that includes two elements, each displaying the MDN logo.

<img id="object-position-1" src="mdn.svg" alt="MDN Logo" />
<img id="object-position-2" src="mdn.svg" alt="MDN Logo" />

CodePudding user response：

Not to be that person, but I suggest you watch a few YouTube videos first, it will help you to understand how HTML and CSS work a lot. Although your question is a bit unclear, from what I understood the thing you're asking for can be done in many ways. For example, flex, grid, absolute positioning and more.

There are many great YouTube channels and website you can learn HTML and CSS from. Coder Coder has some great tutorials on her YouTube channel, w3schools is a website where you can find HTML and CSS related stuff. Have a look at this Geeks for Geeks HTML and CSS tutorial too.

CodePudding user response：

dumber I think, but You have to learn by yourself a little bit!

Take a look at those links :

https://www.w3schools.com/html/default.asp

https://www.w3schools.com/css/default.asp

So, I dumb it down I think...

CSS (style)

        body{
            font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
            font-size:1.2em;
        }
        .above{
            display:relative;
            background-color: blanchedalmond;
            padding:20px;
        }
        .above > img{
            text-align:left;
            vertical-align: text-top;
        }
        .middle{
            display:relative;
            background-color:bisque;
            padding:20px;
        }
        .under{
            display:relative;
            background-color:burlywood;
            padding:20px;
        }

HTML (body)

    <div >
        <img src="../brume.jpg" alt="brume"> I'm above
    </div>
    <div >
        I'm in the middle
    </div>
    <div >
        I'm under
    </div>