I am trying to create a responsive island scenescape by overlaying three elements: I would like to place the palm tree on the sand island to the left, and position the text to float in the space to the right of the tree, but above the sand.
I attempted to build this layout using a flexbox, but cannot get my images to respond to the order command nor the align-self command. I am currently not worrying about the appearance of the layout, I am just trying to learn HTML/CSS and want to be able to understand why the elements are not behaving like expected. The flexbox is temporarily outlined in black, just for ease of visualization while it's in the works.
Link to the site: https://capillary.neocities.org/home
<div class="flexboxtitle"><div class="paradise"><img src="isle/wordart.png" alt="purple text that says jett paradise"></div><div class="glitterpalm"><img src="isle/palmtree.gif" alt="image of a half set sun over water"></div><div class="sand"><img src="isle/sand.png" alt="image of palm trees on a sandy island"></div></div> .flexboxtitle { width: 1000px; height: 500px; border: 1px solid #000000; display: flex; flex-flow: column wrap; justify-content: start; align-items: center; }.paradise img { order: 3; flex-basis: auto; align-self: end; max-width: 200px; z-index:5; }.sand img{ order: 1; flex-basis: auto; max-width: 250px; z-index:3; }.glitterpalm img{ order: 2; flex-basis: auto; height: 200px; z-index:4; }Thank you!! <3