I have a position absolute element which has a min-width. What I want to do is to align the absolute element's end to the relative element's end.
The relative element DOES NOT have a fixed width. The width can be vary depending on the content inside.
The use case here is, I'm building a custom dropdown. The relative element is the label which has the selected text and the position absolute element is the dropdown.
<div class="container">
<div class="text">Text from list</div>
<ul class="list">...</ul>
</div>
The image above has the look I'm expecting. What should I do to get this alignment? Can it be done with pure CSS?
.relative-div {
position:relative;
min-height: 50px;
background:#BB9A9B;
}
.abs-div {
position: absolute;
right: 0;
top: calc(100% + 10px);
min-width: 100px;
min-height: 50px;
background: red;
}
<div class="container">
<div class="relative-div">
relative-div
<div class="abs-div"></div>
</div>
</div>
.element {
padding: 0.75rem 1rem;
border: 1px solid navy;
background-color: dodgerblue;
color: white;
margin: 10px 0px;
}
.parent-class {
position: absolute;
right: 0px;
}
.relative-element {
position: relative;
}
.absolute-element {
position: absolute;
min-width: 200px;
right: 0px;
}
<div class="parent-class">
<div class="element relative-element">Relative Element</div>
<div class="element absolute-element">Absolute Element</div>
</div>
i would recommend to use flex-box. here is a cheat-sheet https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
I have a div, which has an image inside another div. I would like to place the inner div over the second div. So the arrow in the image below should go over the red. Is this possible?
.puscicaAnimacija {
bottom: -2%;
height: 5%;
margin-bottom: -10px;
z-index: 2;
position: absolute;
}
<div class="first">
<div style="display: flex; justify-content: center;">
<img src="https://via.placeholder.com/100" class="puscicaAnimacija" />
</div>
</div>
<div class="second">
</div>
You should put position:relative on the second div that refers to the .puscicaAnimacija class, then using the property z-index on the second element with an higher value than in the first.
.puscicaAnimacija{
position: relative;
}
.second{
position: absolute;
z-index: 3;
}
Note:
I've converted a few of your classNames to use named classes as well as added some additional CSS for demonstration purposes
Perhaps try something like this:
.first {
background: navy;
width: 300px;
height: 100px;
position: relative;
}
.ontop {
background: whitesmoke;
width: 300px;
height: 50px;
position: absolute;
bottom: 0;
}
.second {
background: red;
width: 300px;
height: 50px;
}
.puscicaAnimacija {
bottom: -40%;
left: 10%;
height: 48px;
position: absolute;
}
<div class="first">
<div class="ontop">
<img src="https://cdn-icons-png.flaticon.com/512/159/159119.png" class="puscicaAnimacija" />
</div>
</div>
<div class="second">
</div>
In order to use z-index the parent element must be positioned. Use position:relative on the div you want to go under.
I need to fix a div in the top-right corner of another div. The parent div gets updated with new content and is scrollable.
I tried following some of the answers given to how to place last div into right top corner of parent div? (css) and played around a little, but it always scrolls out of view when I scroll the parent div. How can I make sure it stays there?
This is the closest I've gotten to what I need. But it scrolls out of view if I scroll the parent div.
.A {
position: absolute;
height: 130px;
overflow: auto;
}
.B {
position: absolute;
right: 2px;
top: 2px;
}
<div>
<div className="A">
<b>SOME TEXT</b>
<div className="B">
<b>SOME OTHER TEXT</b>
</div>
</div>
</div>
I just tried to solve may got some help
<div class="parent">
<div class="A">
<b>SOME TEXT</b>
</div>
<div class="B">
<b>SOME OTHER TEXT</b>
</div>
</div>
.A {
position: absolute;
width:100%;
height: 530px;
}
.B {
position: sticky;
top: 0px;
}
.parent{
height: 200px;
overflow: auto;
position: relative;
display: flex;
justify-content: flex-end;
}
If javascript is an option, you could adjust your layout and styles like:
<div>
<div className="A">
<b>SOME TEXT</b>
<div className="B">
<div className="C">
<b>SOME OTHER TEXT</b>
</div>
</div>
</div>
</div>
.A {
position: absolute;
height: 130px;
overflow: auto;
}
.B {
position: absolute;
right: 2px;
top: 2px;
height: {_ => _.elementAScrollHeight};
}
.C {
position: sticky;
top: 0;
}
Where elementAScrollHeight scroll height is the scroll height of gotten by JS (e.g. in react it's done easily using refs).
Class A needs position :relative and Class B position : fixed
.A {
position: relative;
height: 130px;
overflow: auto;
}
.B {
position: fixed;
right: 2px;
top: 2px;
}
Example
Figured out a way to do it, using z-index:
.A {
position: absolute;
top: 0;
left: 0;
height: 130px;
overflow: auto;
}
.B {
z-index: 2;
position: absolute;
right: 2px;
top: 2px;
}
<div class="parent">
<div class="A">
<b>SOME TEXT</b>
</div>
<div class="B">
<b>SOME OTHER TEXT</b>
</div>
</div>
I am using particle js as a background image.Now
<div id="particles-js"></div>
<div class="text">
<h1>Particles Background</h1>
</div>
I have to set position attribute of .text as absolute. Otherwise the section remains hidden. I don't seem to understand why others become hidden. I can't use absolute as it will break my code. Below is the css. Only if I set .text as position:absolute it will display
#particles-js {
position: relative;
width: 100%;
height: 100%;
background: grey;
}
.text {
position: relative;
top: 50%;
right: 50%;
}
<div id="particles-js"></div>
<div class="text">
<h1>Particles Background</h1>
</div>
You are facing this issue possibly because of heighr z-index value for #particle-js
You can do it by either making position: absolute; for #particle-js and/or increasing the z-index for .text
To understand more about positions please check this link
You are using divs which by default have layout but with no contents have no size. You also position the right of one element so the text is off screen. You can then fix that by right align of the text in the div. Here I put two examples to help understand the differences, one with no content as you have and one with a right aligned text.
I put some borders on just so you have a visual of the elements.
#mycontainer{border:solid lime 1px;}
#particles-js {
position: relative;
width: 100%;
height: 100%;
background: grey;
border: solid 1px blue;
}
.text {
position: relative;
top: 50%;
right: 50%;
border: solid 1px red;
}
<div id="mycontainer">
<div id="particles-js">cheese </div>
<div class="text">
<h1>Particles Background</h1>
</div>
</div>
Second example
#mycontainer {
border: solid lime 1px;
width: 100%;
height: 100%;
}
#particles-js {
position: relative;
width: 100%;
height: 100%;
background: grey;
border: solid 1px blue;
}
.text {
position: relative;
top: 50%;
right: 50%;
border: solid 1px red;
text-align:right;
}
<div id="mycontainer">
<div id="particles-js">
</div>
<div class="text">
<h1>Particles Background</h1>
</div>
</div>
I have tried to create a overlaying footer by adding position:absolute to #container & a Top: XXpx to .panel2 as well as adding a z-index however this does not work any help is greatly appreciated.
https://jsfiddle.net/z3q2wtLf/29/embedded/result/
below is an example of what I'm trying to accomplish
div {
position: absolute;
width: 200px;
height: 200px;
}
#div1 {
background-color: red;
}
#div2 {
background-color: blue;
top: 100px;
}
<div id="div1"></div>
<div id="div2"></div>
<div2> would be the footer? In this case, only <div2> has to get the position: absolute setting. Also, as #Yaakov already wrote, the surrounding container has to have position: relative.
A very basic setup would be:
<div class="wrap_all">
<div class="content">
(content text text text)
</div>
<div class="footer">
(footer text)
</div>
</div>
with the following CSS:
.wrap_all {
position: relative;
}
.content {
background: red;
margin-bottom: 50px;
}
.footer {
position: absolute;
bottom: 0px;
height: 50px;
background: yellow;
}
(The margin-bottom: 50px; on .content is there so that no text or images in .content can be hidden by the footer)
Your #div1 and #div2 should be wrapped within an element with relative position in order to work.
For example:
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
And the css:
#container {
position:relative;
}
#div1 {
background-color: red;
}
#div2 {
background-color: blue;
top: 100px;
}
I have div container, stretched vertically to 'body'.
Inside it I have 2 DIVs on the one level.
The 1st must be stretched to browser's window. But it minimal
height shouldn't be smaller, than the second's height.
The 2nd have 2 fixed heights (changing by JS).
The problem is:
Can I solve this problem WITHOUT using JS, but only with CSS+HTML?
UPDATE:
My HTML code structure - jsFiddle
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div>
.container{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding-top: 51px;
}
.div1{
width: 100%;
height: 100%;
position: absolute;
margin-top: -51px;
background: red;
}
.div2{
float: left;
width: 440px;
height: 500px;
margin-top: 44px;
margin-left: 30px;
position: absolute;
background: #cccccc;
}
If you want the first <div> to always be at least as tall as the second <div>, I would start by placing the latter inside the former:
<div class="div1">
<div class="div2"></div>
</div>