I'm using Foundation and ".responsive-embed" video, I have a mobile menu overlay that sits on top. However I've discovered that if this defined before the video (like in the header) the properties that I would expect the z-index to place this overlay on top doesn't work.
I can't understand why, the same values applied after in the markup achieve the desired result. How can I make the red overlay sit ontop?
<div class="overlay">
</div>
<div class="grid-x grid-padding-x">
<div class="small-6 cell">
<div class="responsive-embed widescreen">
<iframe width="420" height="315" src="https://www.youtube.com/embed/mM5_T-F1Yn4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="overlay--blue"></div>
.overlay {
position:absolute;
height:100vh;
width:100vw;
display:flex;
background: red;
top:0;
left:0;
}
.overlay--blue {
position:absolute;
height:50vh;
width:100vw;
display:flex;
background: blue;
top:0;
left:0;
}
Try adding some z-index to your .overlay.
https://codepen.io/DanielRuf/pen/VgWaom
Related
I am trying to make it where this picture of a Pen is behind the "Create" text and positioned to the left. At full size it looks fine, but when you adjust the screen size it loses its positioning. How can I make it responsive so when I adjust the screen size it stays with the "Create" texts in front of it?Example, I want to make it look like this site where the image is positioned behind the text.
#home_nav {
background-color: #5680E9;
}
a{
color:#ffffff;
}
.btn{color:#ffffff;}
.img-fluid {
max-width: 80%;
max-height: 80%;
}
.text-right {
position: absolute;
bottom: 0px;
right: 16px;
}
<!--Where the buttons are located-->
<div class="container-fluid" id="home_nav">
<div class="row">
<div class="col">
<div style="position:relative;">
<img src="/STEMuli_Website/img/pen.png" alt="Pen" style="width:40%;position:absolute; left:-20px; bottom:-100px"></img></div>
<button type="button" class="btn btn-link" data-toggle="modal" data-target="#exampleModal"><div class="display-2 home_text text-right ">Create</div></button>
</div>
<div class="col">
<div class="display-2 home_text">Explore</div>
</div>
<div class="display-2 home_text">Your Library</div>
</div>
<!--RSS feed here-->
<div class="col-8">
<div class="feedgrabbr_widget" id="fgid_15f3fc7e5ddb0c39637a55949"></div>
<script>
if (typeof(fg_widgets) === "undefined") fg_widgets = new Array();
fg_widgets.push("fgid_15f3fc7e5ddb0c39637a55949");
</script>
<script async src="https://www.feedgrabbr.com/widget/fgwidget.js"></script>
</div>
</div>
The site you're using uses the property z-index. Basically it positions html elements in 3-d. elements with higher z-indices are on top of ones with lower z-indices. Note in my example how the blue div is completely on top of the red div. change the z-index to toggle that.
.one{
position:absolute;
top:0;
left:0;
width:200px;
height:200px;
background-color:blue;
z-index:20;
}
.two{
position:absolute;
top:0;
left:0;
width:100px;
height:100px;
background-color:red;
z-index:10;
}
<div class="one">
some content goes here.
</div>
<div class="two">
some content goes here.
</div>
Here is a fiddle.
If someone used a flexbox with 2 items that take up as much space available both will take equal parts of the container. I'm working with a sliding component(Ionic2) that translates one of the boxes(say the left one) over the other(right one) and I'd like to shrink the other based on the final position of the translated box(so that possible inner flex items can resize accordingly). Here's a codepen .
<h1>Both parts take up the same space.</h1>
<div class="container">
<div class="item1">
</div>
<div class="item2">
</div>
</div>
<br>
<h1>They still take up the same space, but the red overlaps the blue.</h1>
<div class="container">
<div class="item3">
</div>
<div class="item4">
</div>
</div>
And the corresponding css
.container{
width:1000px;
height:100px;
background-color:gray;
display:flex;
}
.item1{
height:100%;
width:100%;
background-color:red;
}
.item2{
height:100%;
width:100%;
background-color:blue;
}
.item3{
height:100%;
width:100%;
background-color:red;
transform:translate3d(100px,0,0);
}
.item4{
height:100%;
width:100%;
background-color:blue;
}
Is it possible without having to transform the second box?
I found this jQuery animate script -> http://jsfiddle.net/steweb/dsHyf/ which works perfectly fine for me when I try it standalone. But as soon as I want to include it into my responsive layout using display: table-cell and %-widths everything looks out of place.
I want the .full to fill out 100% of the width and height of the .cell.
Is it possible to adjust this to fluid layouts instead of fixed widths? I have been trying for hours... Or is there a better solution?
I simply want to exchange a first "tile" showing a headline with a second "tile" showing a text/list with a smooth animate effect.
Plus I want to use this script multiple times on the same pages. What can I do?
HTML:
<div class="container">
<div class="sidebar">
<h1>Text</h1>
</div>
<div class="cell">
<div id="wrapper">
<div class="full" id="div1"></div>
<div class="full" id="div2"></div>
</div>
</div>
<div class="cell">
<div id="wrapper">
<div class="full" id="div1"></div>
<div class="full" id="div2"></div>
</div>
</div>
</div>
CSS:
#wrapper{
width:100%;
overflow:hidden;
position:relative;
height:100%;
}
.full{
position:absolute;
width:100%;
height:100%;
}
#div1{
background:#FF0000;
left:0px;
}
#div2{
display:none;
background:#FFFF00;
}
.container{
display: table;
width: 100%;
}
.cell{
display: table-cell;
}
div.container div:nth-child(1){
width: auto;
}
div.container div:nth-child(2), div.container div:nth-child(3){
width: 40%
}
JS:
$('#div2').css('left',-$('#wrapper').width()).show();
$('#div1').click(function(){
$(this).animate({'left':$('#wrapper').width()});
$('#div2').animate({'left':0});
});
$('#div2').click(function(){
$(this).animate({'left':-$('#wrapper').width()});
$('#div1').animate({'left':0});
});
This is what I have done till now.
<div style="overflow:visible;width:1050px;border:1px solid green;height:50px;margin-left:115px">
<div style="border:1px solid red;position:absolute;width:730px;">
<br/><br/><br/>
<div class=''><div class='tagstyle'>FRESHER</div><div class='tagstyle'>IT JOBS</div><div class='tagstyle'>2013</div><div class='tagstyle'>BANGALORE</div></div>
<!----- left --->
<div>
<div style="border:1px solid blue;height:900px;position:absolute;width:340px;margin-left:735px;">
<!------ right --->
<div>
</div>
Problem is, right side div going downward, when left side div has any content.
Aha! Saw your edit now! It's really simple with some css3 table display properties, but that doesn't work in old browsers.
However, you could use some simple css to make a standard blog template with sidebar, header and main content:
<style>
.body-wrapper {
position:absolute;
top:20px;
left:50%;
width:900px;
margin-left:-450px; /* Half the width (negative) */
background:red;
}
.header {
position:relative;
width:100%;
height:100px;
margin-bottom:10px;
background:blue;
}
.main {
float:left;
width:70%;
background:green;
}
.sidebar {
float:right;
width:30%;
background:yellow;
}
</style>
<div class="body-wrapper">
<div class="header">
Header!
</div>
<div class="main">
Content!
</div>
<div class="sidebar">
Sidebar!
</div>
</div>
Here is a jsFiddle as proof: http://jsfiddle.net/Kepk9/
Hope it helps!
Another answer!
If you just would like to position divs after each other, you could set them to display:inline-block, like this:
<style>
.inline {
display:inline-block;
}
</style>
<div class="inline">
Labalodado
<br/>multiline content
</div>
<div class="inline">
Less content
</div>
<div class="inline">
Another div
<br/>with
<br/>multiline content
</div>
The reason why your code doesn't work is really simple actually. I made some other answers first because I think that they are a better approach.
position:absolute doesn't automatically move the item to {0,0}
You have to set top:0px by yourself.
Oh.. and there are some mistakes in your code too, but just go with one of my other too answers and you'll be fine :)
This is somewhat related to this question but I'm trying to achieve this when the div is aligned vertically.
More or less, this is what I'm trying to achieve:
Main Div: Take the rest of the screen
Footer Div: Take as much space as needed
The css for float:bottom isn't available, so I'd like to hear some alternatives.
Here's what I have at the moment:
<div id="main_div" style="height:100%;overflow:scroll">
...Contents
</div>
<div id="footer_div" style="height:50px">
...Contents
</div>
Footer shows below main_div and the user has to scroll down to see it, instead of main_div adjusting itself to take just enough screen height to prevent the scrollbar to show up.
you can check this fiddle
http://jsfiddle.net/sarfarazdesigner/3fLca/
let me know am understand right or wrong? because what i have done what i understood by your question.
#main_div{
position:absolute;
left:0;
right:0;
top:0;
bottom:50px;
overflow:auto;
background:#eee;
}
#footer_div{
position:absolute;
left:0;
right:0;
bottom:0;
background:#ddd;
height:50px;
}
You can set the footer a fixed position at the bottom of the page. Any overlapping content will scroll behind it.
<html>
<head>
</head>
<body>
<div class="wrapper" style="width: 100%; border:1px solid blue;">
<p>Your website content here.</p>
<p>Your website content here.</p>
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer" style="width: 100%; position:fixed; left:0; bottom: 0; border:1px solid red;">
<p>FOOTER CONTENT HERE</p>
</div>
</body>
</html>