Can we utilize CSS/HTML to visually move a full width element that is positioned below another one so that it appears above without altering the markup order?
<div id="first">first</div>
<div id="second">second</div>
#first {…}
#second {…}
Expected outcome:
second first
If you want to achieve this, consider utilizing CSS Flexible Boxes. Focus on using the Flexbox order property for proper alignment.
To demonstrate, I have included width and background-color attributes to enhance clarity. Be mindful that browser compatibility with CSS flexible boxes is limited to contemporary browsers like IE 10+, Chrome 21+, Firefox 20+. It might encounter issues on older mobile browsers.
.container {
display: flex;
flex-direction: column;
}
#first {
order: 2;
width: 10em;
margin-top: 1em;
background-color: orange;
}
#second {
order: 1;
width: 10em;
background-color: yellow;
}<div class='container'>
<div id=first>
first
</div>
<div id=second>
second
</div>
</div>Only if the height of the second element is known precisely:
#first {
margin-top: 20px;
}
#second {
top: 0;
position: absolute;
}
Check out this code on Js Fiddle
This is an example of how you can position elements using CSS:
#first { position:relative; top:18px}
#second {position:relative; bottom:18px}
One way to handle this issue is by utilizing position: absolute. However, a drawback of this approach is that the parent element will not expand in height as the child container's (first element) height increases. (To resolve this, JavaScript can be used)
CSS
.container {
border: 1px solid green;
display: inline-block;
position: relative;
}
#first {
position: absolute;
top: 100%;
}
This may be an old question, but I found a simple solution that worked for me.
Simply wrap the two columns in a div and apply the following styles to the div:
display: flex;
flex-direction: column-reverse;
For example:
.container {
display: flex;
flex-direction: column-reverse;
}
<div class="container">
<div>first</div>
<div>second</div>
</div>
I am seeking some clarification on my code and the resulting issues it is causing. Check out this image for reference: https://i.stack.imgur.com/jBQYd.png Why is the body height not taking up 100% of the space? The background image appears to be affect ...
How can I dynamically assign a video URL to the <video> tag so that the video will display in the player immediately? This is my current code: <script> jQuery( '#the-video' ).children( 'source' ).attr( 'src', &apo ...
I'm attempting to center the image. It seems like it should be a simple fix, but I've experimented with multiple solutions and even started from scratch three times. #main_image { background-color: bisque; position: fixed; display: block; ...
While browsing through Quora and Facebook feeds, I noticed the fixed size of user display pictures: width: 40px; height: 40px; Even when resizing the browser window for a responsive design, these pictures maintain their size at 40px x 40px. What other f ...
I am facing an issue with implementing an ajax commenting system on my website. When I place all the code from the /comment directory directly in the root, everything works fine and the commenting system functions as expected on new pages. However, when I ...
Currently, I am working on a Sharepoint Web Part mockup in this fiddle. As shown below, the second form is not yet formatted or aligned properly: Additionally, there are issues with the alignment of the second form, which appears a row below where it shou ...
Is there a way to ensure that iOS displays a numeric keyboard for my password field? Currently, I am utilizing the following code: <input type="password" pattern="\d*" name="pass"/> This method was effective in iOS7, however, it seems that the ...
In my project, there is a dynamic select list that retrieves items from the database. Users have the ability to add or delete items from this list. Below is some code related to this functionality: <div class="form-group col-md-3"> <la ...
Is there a way to ensure that the fixed column width is maintained even with long strings? I am trying to display a report in a jsp by having headers in one table and content in another table, both with columns set to the same width. However, some of the ...
I have an Angular 8 application with a form containing a save button that triggers a call to a Spring Boot microservice using RxJs. I decided to test what would happen if the Rest API server were down. When the Rest API is running, clicking the button wor ...
How can I make the paragraph text span across most of the box width in Bootstrap 4? <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJ ...
I have been attempting to implement Google Prettify in my AngularJS project. It seems to be functioning correctly on the main page, but once I navigate to another route using Angular (after ng-view), it stops working properly. You can check out the plunker ...
Having trouble binding a date to an input field: <body ng-app> <div ng-controller="MainCtrl"> <input type="date" ng-model="dateString"/> <br/>{{ dateString }} <br/><input type="date" ng-model="date1"/ ...
Upon observation, I found that setting margin: 0px had no effect. Even after specifying a margin of 0 for left and right, the screenshot still displayed the margin. https://i.sstatic.net/mkYsO.png Initially, I checked for any conflicting classes or IDs c ...
Here is the menu code snippet: <div class="header"> <div id="logo"></div> <ul class="menu"> <li><a href="/index.aspx">Home</a></li> <li><a href="/about.aspx"& ...
I am looking for a way to change the CSS codes of the blog1popup class when the image is clicked. I already know how to do this using hover, but I need help making it happen on click instead. The element I want to use as the button; <div class=&quo ...
I have implemented an image gallery using Bxslider, but I am facing an issue with the loading time as there are more than 15 images in each slide. To address this problem, I want to load images one by one when a particular slide appears. I came across an e ...
Is there a way to dynamically change the country flag icon displayed on an element using the flag-icon stylesheet? This CSS provides country flags based on ISO codes, like so: <span class="flag-icon flag-icon-gr"></span> This code would displ ...
I have a situation where I need to select an option from a dropdown menu. Here is the code for the dropdown: <select id="customUser_id" name="customUser_id"> <option value="2" label="Friends Of Friends">Friends Of Friends</option> &l ...
Can you change the default styles of Firefox to match those of Chrome? ...