Is it somehow possible to ensure that inner div with class .b can be displayed over the outer div (class .a). For non lot of inner div is hidden. Simple z-index doesn't help and I not able to move inner div element outside the outer one.
I have html file :
<div class="a">
<span class="aa">AAAAA
<div class="b">
1.A
</div>
</span>
...
</div>
And css style like this :
.a {
position:absolute;
width:500px;
height:50px;
border:1px solid red;
overflow-y: auto;
overflow-x: hidden;
}
.b {
display: none;
background: #FFF;
position:absolute;
left: 10px;
top: 10px;
width:150px;
height:150px;
border:1px solid blue;
z-index:10;
}
.aa {
position: static;
}
.aa:hover .b {
display: block;
}
Here is js fiddle with my specification:
Jsfiddle
I have found solution by myself. Removing position: absolute from div with class a helped.
.a {
width:500px;
height:50px;
border:1px solid red;
overflow-y: auto;
overflow-x: hidden;
}
Related
I've tried many things but i can not figure out how to put div2 on the bottom of the div1 I want top part of div2 to be inside of the div1 bottom side
Like this
Any suggestions please?
https://jsfiddle.net/njwq14vu/13/
Here's what you're looking for:
.div1 {
background: red;
height: 50px;
width: 120px;
}
.div2 {
background: blue;
height: 50px;
width: 100px;
top: -10px;
position: relative;
}
<div class="container">
<div class="div1">Helo</div>
<div class="div2">Helo1</div>
</div>
What changed:
.div2 has top property set to -10px, in order to show it 10 pixels before than first;
.div2 has also position property set to relative, that allow the HTML element to override his design default behaviour (static).
try this instead,
add relative positioning to container div
.container{
position:relative;
}
and absolute positioning to div2
.div2{
position:absolute;
top:30px;
left:15px;
}
.div1 {
background:red;
height:50px;
width:150px;
}
.div2 {
background:blue;
height:50px;
width:120px;
position:absolute;
top:30px;
left:15px;
}
.container{
position:relative;
color:#fff;
text-align:center;
}
<div class="container">
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
</div>
From your question (div2 to be inside of the div1), I unedrstand you want to overlap..
Is this the kind ouf Output you are looking for?
You can use Position: Absolute; in your css code to achieve this.
CSS below:
.div1 {
background:red;
height:50px;
width:120px;
}
.div2 {
position: absolute;
top: 40px;
left: 20px;
background:blue;
height:50px;
width:120px;
You can operate left and right attributes as desired for your design.
.container{
position: relative;
}
.div1 {
background: red;
height: 50px;
width: 120px;
}
.div2 {
background: blue;
height: 50px;
width: 100px;
position: absolute;
left: 0;
right: 0;
top: 30px;
}
<div class="container">
<div class="div1">Helo</div>
<div class="div2">Helo1</div>
You can use position absolute on your div2 with left and top to make sure it stays on top of div1
Live Demo:
.div1 {
background: red;
height: 50px;
width: 120px;
}
.div2 {
background: blue;
height: 50px;
width: 110px;
position: absolute;
top: 2.5em;
left: 0.8em;
}
<div class="container">
<div class="div1">Helo</div>
<div class="div2">Helo1</div>
</div>
Please let me know if this helps you. I have added two attributes to .div2 class keeping your code intact.
.div1 {
background:red;
height:50px;
width:120px;
}
.div2 {
background:blue;
height:50px;
width:120px;
position: relative;
top: -10px;
}
<div class="container">
<div class="div1">Helo</div>
<div class="div2">Helo1</div>
</div>
Wrap your div in another div, and then use flex's 'order' property like so
.example {
display: flex;
flex-direction: column;
}
.example > .a {order: 3; } /* Will be displayed third */
.example > .b {order: 2; } /* Will be displayed second */
.example > .c {order: 1; } /* Will be displayed first */
<div class="example">
<div class="a">First</div>
<div class="b">Second</div>
<div class="c">Third</div>
</div>
I want to make a vertical line between two divs. we have hr for horizontal line but none for vertical line as I know. Is there anyway to make it without using border?
<style>
#wrapper_1 {
background-color:pink;
height:100px;
float:left;
width: 100px;
}
#wrapper_2 {
background-color:brown;
height:100px;
width: 100px;
float:right;
}
</style>
<div id="wrapper_1">
Creating slideshows PHP
</div>
<div id="wrapper_2">
Creating slideshows with WordPress
</div>
You can also use pseudo elements to make a vertical separator. You don't need an extra div to make a separator just use the pseudo elements and style it according to your needs.
#wrapper_1 {
background-color: pink;
height: 100px;
float: left;
width: 100px;
}
#wrapper_1:after {
content: "";
background-color: #000;
position: absolute;
width: 5px;
height: 100px;
top: 10px;
left: 50%;
display: block;
}
#wrapper_2 {
background-color: brown;
height: 100px;
width: 100px;
float: right;
}
<div id="wrapper_1">
Creating slideshows PHP
</div>
<div id="wrapper_2">
Creating slideshows with WordPress
</div>
PS: Beware of the absolute positioning of the pseudo elements.
Thanks.
You can use <hr>, as it is semantically correct, and then use CSS to convert it to a vertical line.
hr.vertical {
height:100%; /* you might need some positioning for this to work, see other questions about 100% height */
width:0;
border:1px solid black;
}
Create a new div between your two div and add this class:
.vertical-row {
Float:left;
height:100px;
width:1px; /* edit this if you want */
background-color: your color
}
I am not a css hacker but this is how would I do it.. Please notice that you should use clear: both; after floating elements.
HTML:
<div class="container">
<div id="wrapper_1">
Creating slideshows PHP
</div>
<div class="seperator"></div>
<div id="wrapper_2">
Creating slideshows with WordPress
</div>
<div class="clearfix"></div>
</div>
CSS:
#wrapper_1 {
background-color:pink;
height:100px;
float:left;
width: 100px;
}
#wrapper_2 {
background-color:brown;
height:100px;
width: 100px;
float:right;
}
.seperator {
height: 100%;
width: 1px;
background: black;
top: 0;
bottom: 0;
position: absolute;
left: 50%;
}
.container {
position: relative;
}
.clearfix {
clear: both;
}
DEMO: jsfiddle
sure you can:
just wrap the elements into a wrapper and make that one display:table-cell.
.bigwrapper{
display:table;
width:100%;
}
second: create another div width class "vr" between your two wrappers and style it as follows:
.vr{
width:1px;
display:table-cell;
background-color:black;
height:100%;
}
Final Demo at:
https://plnkr.co/edit/uJsmrCaF9nns49J5RcYj?p=preview
If you are using flex element and you are having issues with element(s) transforming to columns because of the display: flex; property, use the box-shadow property on the element as it does not add up to the container space.
I have two divs that I am trying to stack over each other but the one I want on top is not showing. I want the blue background div to lay on top of the red background div. Any advice? The reason why I want to overlay the blue div is because the container is a centered grid and I want the red div to be the background for the first half of the page.
JSFIDDLE
CSS
.buddy {
width: 50%;
height: 629px;
display: inline-block;
position: relative;
background: red;
}
.buddy-content {
position: absolute;
top: -629px;
z-index: 10;
background: blue;
}
.container {
max-width: 1000px;
margin: 0 auto;
overflow:hidden;
position:relative;
padding: 0 10px;}
You have made the second div absolute so you don't need to give the negative value for top. The second div is hiding because you top -629px; Try making the top:0 and see. And also for your current code. Remove the overflow hidden and put z-index like this:
.buddy {
width: 50%;
height: 629px;
display: inline-block;
position: relative;
z-index:9;
background: red;
}
.buddy-content {
position: absolute;
top: -629px;
z-index: 10;
background: blue;
}
.container {
max-width: 1000px;
margin: 0 auto;
width:200px;
height:200px;
position:relative;
padding: 0 10px;
}
.buddy {
width: 50%;
height: 629px;
display: inline-block;
position: absolute;
background: red;
}
.buddy-content {
position: absolute;
z-index: 10;
background: blue;
}
<div class="buddy BlueGradient">
</div>
<div class="container">
<div class="buddy-content">
ROGER
</div>
</div>
https://jsfiddle.net/kt77cp3e/6/
just add z-index : higher to the div that you want to show on top and set z-index low to the other one ..
ant one thing your code is working good just you need to remove " top : -629px;"
that thing is not allowing blue div to be on top just it is showing at the -629 px position..!!!!
If you can update your code like this, it may solve the issue:
Demo:https://jsfiddle.net/kt77cp3e/7/
CSS:
html, body {
height:100%;
width:100%:
}
.container {
width:50%;
height:100%;
background:red;
position:relative;
}
.container>div {
position:relative;
left:0;
right:0;
}
.container>div:first-child {
top:0;
height:50%;
background:blue
}
.container>div:last-child {
bottom:0;
height:50%;
background:green
}
HTML:
<div class="container">
<div></div>
<div></div>
</div>
Update: Considering the latest updated code, I think you should remove overflow:hidden from the container styles. That should do the trick
You should set the dimension on the .container div.
CSS:
.container {
position:relative;
width:100px; //You may modify these values
height:100px
}
Demo: https://jsfiddle.net/kt77cp3e/1/
.buddy { width: 50%; height: 629px; display: inline-block; position: relative; background: red;}
.buddy-content { position: absolute; top: 0px; z-index: 10; background: blue; }
.container {max-width: 1000px; margin: 0 auto; overflow:hidden; position:relative; padding: 0 10px; position: relative;}
<div class="container">
<div class="buddy BlueGradient">
<div class="buddy-content">ROGER</div>
</div>
</div>
This brings the text "Roger" with blue background on top of the red background
Is it possible to make the width of the absolutely positioned div big enough to contain the text, but not bigger?
I tried inline-block, but it doesn't seem to work, because once I set the position:absolute the div will take the max width of the parent element.
Could you suggest what changes I can make to the child element, so that it float in the center of the parent div and has smallest width possible but fits the text string inside.
Here is the jsfiddle: http://jsfiddle.net/hmmrfmk0/
<div class='grand-parent'>
<div class='parent'>
<div class='child'>
long long long string
</div>
</div>
.grand-parent {
position: absolute;
width:500px;
height:100px;
background-color:red;
}
.parent {
position:relative;
margin: 0;
padding: 0;
width:500px;
height:100px;
}
.child {
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
background-color: #ccccc0;
border: 1px solid black;
height:15px;
display:inline-block;
}
Thx!
Yes it is. Use white-space:nowrap and remove top, left, right, bottom 0 values and the position the element where you want it. In this case, dead center of the parent div.
.grand-parent {
width: 500px;
height: 100px;
background-color: red;
margin-bottom: 10px;
}
.parent {
position: relative;
margin: 0;
padding: 0;
width: 500px;
height: 100px;
}
.child {
position: absolute;
margin: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ccccc0;
border: 1px solid black;
height: 15px;
white-space: nowrap;
}
<div class='grand-parent'>
<div class='parent'>
<div class='child'>
long long long string
</div>
</div>
</div>
<div class='grand-parent'>
<div class='parent'>
<div class='child'>
long long long string ong long long string
</div>
</div>
</div>
Your .child class includes left:0 and right:0
This will force the div to be as wide as it's parent, inline-block will not over-ride this.
Remove right:0 from .child and it should work as you want
Try this fiddle. If you display the parent as table-cell and put vertical-align as middle then you can position vertically.
.grand-parent {
position: absolute;
width:500px;
height:100px;
background-color:red;
}
.parent {
position:relative;
margin: 0;
padding: 0;
width:500px;
height:100px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child {
background-color: #ccccc0;
border: 1px solid black;
height:15px;
display:inline-block;
vertical-align: middle;
}
See my fiddle here: http://jsfiddle.net/Waterstraal/bMfbH/2/
The HTML:
<div class="row">
<div class="actionPanel"></div><div class="resultPanel"></div>
</div>
The CSS:
.row {
width:500px;
height: 50px;
overflow:hidden;
border:1px solid #ccc;
}
.resultPanel {
display:inline-block;
width:450px;
height: 50px;
background: #ddd;
}
.actionPanel {
display:inline-block;
width:50px;
height: 50px;
background:#eee;
}
I want to "slide" the resultpanel to the right (so it's still on the same level as the actionPanel), but instead it gets pushed down out of view.
The width of the actionPanel is being made bigger in javascript so that the total width of the two elements are bigger than the width of the parent element.
Does anyone know how I can achieve the effect i'm after? I've tried to use floating elements, but that had the same result. I also tried to use a table element, to no effect.
Thank you in advance.
Add white-space: nowrap to the container of the inline-block elements, in this case .row.
http://jsfiddle.net/thirtydot/bMfbH/3/
Change css:
body {
padding:10px;
}
.row {
width:500px;
height: 50px;
overflow:hidden;
border:1px solid #ccc;
}
.resultPanel {
height: 50px;
background: #ddd;
}
.actionPanel {
float:left;
width:50px;
height: 50px;
background:#eee;
}