Positioning z-index does not work as expected - javascript

I cannot position info-pop-title on top of bar-header as you can see from my current code the text "TEST----" is visible but under the bar-header element.
http://jsfiddle.net/uvh4ymh9/
Could you point me out what am I doing wrong and how to fix it
PS: I cannot change structure for the HTML, only CSS solution
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.bar-header, .bar-footer {
position: fixed;
left: 0px;
width: 1280px;
z-index: 1;
background-color: rgba(50,50,50,0.5);
text-align: center;
}
.bar-header {
top: 0px;
height: 60px; /* safearea top 25 + content 20 + space bottom 15*/
}
.bar-header h1 {
position: fixed;
top: 25px; /* safearea top 25 */
left: 25px; /* safearea left */
font-size: 20px; /* content */
}
.bar-footer {
top: 670px;
height: 50px; /* safearea bottom 20 + content 20 + space top 10 */
font-size: 20px; /* content */
}
.bar-footer > ul {
position: fixed;
top: 680px; /* footer top 670 + space top 10*/
left: 1150px;
}
.bar-footer > ul li {
float: left;
}
.bar-footer li:nth-child(1) span {
color: blue;
}
#scene-main {
position: fixed;
top: 0px;
left: 0px;
width: 1280px;
height: 720px;
/*background: #ffffff url("/auth/assets/tv-safearea-transparent.png") no-repeat left;*/
background-color: darkgrey;
}
#btn-up, #btn-down {
position: fixed;
left: 1230px;
width: 50px;
height: 50px;
background-color: yellow;
outline: 1px solid black;
z-index: 200;
}
#btn-up {
top: 0px;
}
#btn-down {
top: 50px;
}
#content {
position: fixed;
top: 0px; /* header */
}
.content-section:first-child {
margin-top: 60px; /* header height content does not go under header */
}
.content-section {
background-color: lightgray;
outline: 1px solid black;
width: 1280px;
}
/* Content sizes */
.content-snippet {
height: 360px; /* 1 slots */
width: 1280px;
background-color: lightblue;
outline: 1px solid green;
}
.content-snippet:nth-child(even) {
background-color: lightcoral;
}
.content-section h2 {
position: relative;
top: 30px; /**avoid to go under the header bar*/
}
.active {
background-color: violet !important;
}
.snippet-pop-info {
position: fixed;
top: 640px; /*430 = final position as visible / 670 = final position as not visible */
width: 1280px;
height: 240px;
background-color: darkblue;
opacity: 1;
color: white;
}
.snippet-pop-info ul {
position: absolute;
top: 0px;
left: 1155px;
width: 100px;
}
.snippet-pop-info ul li {
width: 100px;
}
.snippet-pop-info .rating {
position: absolute;
top: 65px;
left: 25px;
unicode-bidi: bidi-override;
direction: rtl;
}
.snippet-pop-info .rating > span {
display: inline-block;
position: relative;
width: 20px;
}
.snippet-pop-info .rating > span:hover:before,
.snippet-pop-info .rating > span:hover ~ span:before {
content: "\2605";
position: absolute;
}
#info-pop-title {
position: fixed;
top: 0px;
left: 250px;
z-index: 1;
font-size: 30px;
color: white;
font-weight: bold;
}
#info-pop-description {
position: absolute;
overflow: hidden; /* hide content that does not fit in the columns*/
top: 25px;
left: 300px; /* TEST */
height: 80px;
width: 800px;
font-size: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
}
</style>
</head>
<body>
<div id="viewport">
<div id="scene-main" class="scene" style="">
<div class="bar-header"><h1>ChannelLive logo</h1></div>
<div id="page">
<div id="content">
<div id="snippet-cnt-0" class="content-snippet">
0
<div class="snippet-pop-info" style="top: 720px;">
<h1 id="info-pop-title" style="word-wrap: break-word;">TEST-----------------</h1>
<div class="rating"><span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span></div>
<div id="info-pop-description" style="word-wrap: break-word;">null</div>
<ul>
<li class="focusable" data-href="movie-play">Play</li>
<li class="focusable" data-href="movie-details">Details</li>
</ul>
</div>
</div>
</div>
</body>
</html>

It's not clear what you're trying to accomplish, but I can make Chrome work like Firefox by getting rid of the
position: fixed;
style from #content. Whether that will work in the larger context of your layout, I don't know, but the problem is that the way z-index works is weird and complicated, and involves not just individual fixed elements but also any fixed parents they might have.
edit — oh also, set the z-index of .snippet-pop-info to 2. Here is an updated version of your fiddle.

Make your
.bar-header, .bar-footer{
z-index:0;
}
This will do the trick. Since your z-index for .bar-header and .info-pop-title are the same.

Add z-index in your content div
#content
{
position:fixed;
top:0;
z-index:1;
}

I'm afraid you can't make it work with the way your html is nested.
The element you want to pull on top to cover the rest is located in the main container while your second element is isolated in the header. If you want to bring your info-pop-title there you'll have to change the z-index of your #page element, which will cover everything.
The only thing I see you can achieve with this structure would be to position your diverse containers relatively and change the css of your info-pop-title with a negative margin, position absolutely this time.

Related

prevent div from overlapping other divs

I've looked through a dozen other similar questions as this one, but I don't think any of them are similar enough to my scenario. This isn't my exact setup, but I've simplified it to hopefully make it easier to explain and also answer.
I have 3 divs. If the window is wider than 600px, div1 and div2 should flow normally, floated left, and div3 should float to the right. Using a #media query, if the window is narrower than 600px, div 3 should appear above div1 and div2, pushing them down so they're stacked on top of each other.
I've tried experiementing with display and position properties on all 3 divs, and I can't figure out how to make this work. I'm working with a templated system, so I can't add a container. I can only work with these 3 divs.
#id1 {
background: red;
width: 100px;
height: 100px;
}
#id2 {
background: yellow;
width: 100px;
height: 100px;
}
#id3 {
background: blue;
width: 100px;
height: 100px;
float: right;
position: fixed;
top: 50px;
right: 20px;
}
#media only screen and (max-width: 600px) {
#id3 {
float: left;
position: absolute;
top: 0px;
left: 0px;
}
}
<div id="id1">DIV 1</div>
<div id="id2">DIV 2</div>
<div id="id3">DIV 3</div>
Set position: relative and correct top/left/right values:
#id1 {
background: red;
width: 100px;
height: 100px;
}
#id2 {
background: yellow;
width: 100px;
height: 100px;
}
#id3 {
background: blue;
width: 100px;
height: 100px;
float: right;
position: fixed;
top: 50px;
right: 20px;
}
#media only screen and (max-width: 600px) {
#id3 {
float: left;
position: relative;
top: 0;
left: 0;
right: unset;
}
}
<div id="id1">DIV 1</div>
<div id="id2">DIV 2</div>
<div id="id3">DIV 3</div>
To stack the div#id3 on top, you'll need to use position: absolute and set custom top position for all 3 divs:
#id1 {
background: red;
width: 100px;
height: 100px;
}
#id2 {
background: yellow;
width: 100px;
height: 100px;
}
#id3 {
background: blue;
width: 100px;
height: 100px;
float: right;
position: fixed;
top: 50px;
right: 20px;
}
#media only screen and (max-width: 600px) {
#id1,
#id2,
#id3 {
position: absolute;
top: 10px;
float: none;
}
#id1{ top: 110px; }
#id2{ top: 210px; }
#id3{ right: unset; }
}
<div id="id1">DIV 1</div>
<div id="id2">DIV 2</div>
<div id="id3">DIV 3</div>
Please read https://developer.mozilla.org/en-US/docs/Web/CSS/order.
I hope this helps. If you need me to explain it to you, please let me know. I will be glad to.
body {
display: flex;
/* Optional, if you want the DIVs 100% width: */
flex-direction: column;
}
#id1 {
background: red;
width: 100px;
height: 100px;
}
#id2 {
background: yellow;
width: 100px;
height: 100px;
}
#id3 {
background: blue;
width: 100px;
height: 100px;
float: right;
position: fixed;
top: 50px;
right: 20px;
}
#media only screen and (max-width: 600px) {
body > #id3 { order: 1; }
body > #id1 { order: 2; }
body > #id2 { order: 3; }
#id3 {
float: left;
position: relative;
top: 0px;
left: 0px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div id="id1">DIV 1</div>
<div id="id2">DIV 2</div>
<div id="id3">DIV 3</div>
</body>
</html>
This is the best solution according to me
I just came up with a perfect solution for my needs. Adding a margin-top to div1 in the #media query will bump it and div2 down:
#media only screen and (max-width: 600px) {
#id3 {
float: left;
position: absolute;
top: 0px;
left: 0px;
}
#id1 {
margin-top: 100px;
}
}

Navigation bar : position Absolute and Sticky

I'm trying to make a navigation bar that overlap my header and stick to the top of the window on scroll.
It will start at top: 45px and stick at top: 0 on scroll.
My first approach was to set it at position: fixed; top: 45px and change the value with JS on a scroll event. But Firefox gave me the warning about "asynchronous panning" discussed on this post.
I have been able to do it with a bit of CSS trickery, but I am wondering if there is a simpler CSS way or a valid JS approach to do this (not throwing a warning).
body {
position: relative;
height: 100%;
width: 100%;
background-color: grey;
overflow-x: hidden;
margin: 0;
}
.container {
position: absolute;
top: 0;
left: -1px;
width: 1px;
bottom: 0;
padding-top: 45px;
overflow: visible;
}
nav {
position: sticky;
top: 0;
transform: translateX(-50%);
margin-left: 50vw;
width: 300px;
height: 70px;
background-color: red;
}
header {
height: 50vh;
background-color: blue;
}
main {
height: 200vh;
width: 100%;
background-color: green;
}
<div class="container">
<nav></nav>
</div>
<header>
</header>
<main>
</main>
You can simplify your code and avoid using an extra container:
body {
background-color: grey;
margin: 0;
}
nav {
position: sticky;
top: 0;
width: 300px;
height: 70px;
margin:45px auto -115px; /* 115 = height + margin-top */
background-color: red;
}
header {
height: 50vh;
background-color: blue;
}
main {
height: 200vh;
background-color: green;
}
<nav></nav>
<header>
</header>
<main>
</main>

How to make a footer placed below 'bottom:0' CSS?

I am trying to add footer on a HTML page. The HTML then printed and the footer should be on the bottom of every page. But, I got a problem.
There's a table generated in the HTML. The table row may need 2 or more pages to be displayed. The footer on the page with the table is overlapped with the table rows. How to fix this? My plan is to make the footer placed below bottom:0, but then the footer is not even displayed. Are there any work around for this problem?
This is my footer:
<footer>
<div class='div_footer'>
<?php echo "This is footer"; ?>
</div>
</footer>
This is my CSS for printing:
#media print {
footer {
position: fixed;
bottom: 0;
}
}
EDIT:
this is a fiddle : http://jsfiddle.net/88mnq8xo/
First need to setup footer in bottom of the page and bottom of the content. Then wright the same code inside the #media print.
First need to work with body and html.
html{
height: 100%;
width: 100%;
}
body{
height: 100%;
padding-bottom: 100px; /* This is footer height */
position: relative;
width: 100%;
}
Second need to work with the footer.
footer{
bottom: 0;
height: 100px; /* Footer height */
left: 0;
position: absolute;
width: 100%;
z-index: 1;
}
Third need to work with #media print.
#media print{
body{
padding-bottom: 100px; /* Footer height */
position: relative;
}
footer{
bottom: 0;
height: 100px; /* Footer height */
left: 0;
position: absolute;
width: 100%;
z-index: 1;
}
}
HTML
<html>
<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>
*,
*:after,
*:before{
box-sizing: inherit;
}
html{
box-sizing: border-box;
height: 100%;
width: 100%;
}
body{
background-color: #121212;
height: 100%;
margin: 0;
padding: 0 0 100px;
position: relative;
width: 100%;
}
footer{
background-color: #009688;
bottom: 0;
color: white;
font-size: 15px;
height: 100px;
left: 0;
line-height: 100px;
position: absolute;
text-align: center;
width: 100%;
z-index: 1;
}
#media print{
body{
background-color: #121212;
height: 100%;
margin: 0;
padding: 0 0 100px;
position: relative;
width: 100%;
}
footer{
background-color: #009688;
bottom: 0;
color: white;
font-size: 15px;
height: 100px;
left: 0;
line-height: 100px;
position: absolute;
text-align: center;
width: 100%;
z-index: 1;
}
}
<body>
<header></header>
<main></main>
<footer>© StackOverflow 2017</footer>
</body>
Hope this will help!!!
Try adding margin to the table. margin should be the same height of fixed positioned footer. Or you same amount of padding to the containing div.
Try this instead :
you should give the fixed position a height and a width of 100%,
for the body or the wrapper you can give it a padding-bottom same as the footer height.
if you dont want it to be fixed, you can change it to absolute but give it height and width.
html :
<html>
<body>
<div class="wrapper">
<div class="row" style="margin:0 1cm 0cm 1cm" id="div_print">
.
.
.
</div>
<footer></footer>
</div>
</body>
</html>
css:
#media print {
footer {
position: fixed;
bottom: 0;
height:40px;
background-color:#000;
width:100%;
left:0;
padding-left:22px;
color:#fff;
}
}
body,html{
min-height: 100%;
position: relative;
}
.wrapper{
position: relative;
width:100%;
padding-bottom:80px;
}

Allow Scrolling in DIV when hovering a fixed element

I have a container div with a button and a car img inside of it. The car moves when the page is scrolled.
When the mouse is hovering over top of the button or img, the scroll wheel no longer works.
I tried adding a gray overlay div to block the hover on the button and car. But this prevents the button from being clicked.
Is there a way to make scrolling work even when the button or image is hovered?
$('#home').on('scroll', function() {
var dist = $(this).scrollTop();
$('#cars').css('left', dist / 2);
});
body {
position : absolute;
height: 90%;
width: 90%;
background: #fff;
}
#overlay {
height: 1200px;
background-color: rgba(255,255,255,0.7);
z-index: 999;
position: relative;
pointer-events: none;
}
#buttons {
width: 150px;
height: 40px;
background-color: yellow;
position: fixed;
text-align: center;
z-index: 5;
cursor: pointer;
}
#home {
position: relative;
top:0px;
width: calc(100% + 25px);
overflow-y: scroll;
background-image: url('images/movie_6.jpg');
height: 400px;
background-color: #000000;
margin-top: 40px;
}
#homeinner {
height: 1800px;
overflow: hidden;
}
#cars {
height: 50px;
position: fixed;
top: 100px;
left: 0;
}
#bar {
height: 80px;
width: calc(100% + 25px);
position: absolute;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="home">
<div id="homeinner">
<button id="buttons" onclick="alert('Log in page!')">
button
</button>
<img id="cars" src="http://www.kindaholidays.com/hotel/img/travel_icon/512x512/car.png" />
<div id="overlay">
</div>
</div>
</section>
<div id="bar">
</div>
I think I realize now that your issue is that when the mouse is over top of the button or car image, mousewheel scrolling does not work. This is because the position of those elements is "fixed". I'm not sure if this is a bug or not. Anyways, you can simulate the fixed position with javascript to get around this issue.
$('#home').on('scroll', function() {
var dist = $(this).scrollTop();
$("#buttons").css("top", dist);
$("#cars").css("top", dist + 100);
$('#cars').css('left', dist / 2);
});
body {
position: absolute;
height: 90%;
width: 90%;
background: #fff;
}
#overlay {
height: 1200px;
background-color: rgba(255, 255, 255, 0.7);
z-index: 999;
position: relative;
pointer-events: none;
}
#buttons {
width: 150px;
height: 40px;
background-color: yellow;
position: absolute;
text-align: center;
z-index: 5;
cursor: pointer;
}
#home {
position: relative;
top: 0px;
width: calc(100% + 25px);
overflow-y: scroll;
background-image: url('images/movie_6.jpg');
height: 400px;
background-color: #000000;
margin-top: 40px;
}
#homeinner {
height: 1800px;
overflow: hidden;
}
#cars {
height: 50px;
position: absolute;
top: 100px;
left: 0;
}
#bar {
height: 80px;
width: calc(100% + 25px);
position: absolute;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="home">
<div id="homeinner">
<button id="buttons" onclick="alert('Log in page!')">
button
</button>
<img id="cars" src="http://www.kindaholidays.com/hotel/img/travel_icon/512x512/car.png" />
</div>
</section>
<div id="bar">
</div>

jQuery div slide to left on hover a div/nextarrow

I am trying to implement something like this http://www.jamieoliver.com (slider -> arrow on hover)
I have done this much http://jsfiddle.net/PXLJG/5/ In the jsfiddle script? The arrow must be stand. The div.class=content 'Text next article' must be slide to left next to the arrow.
$('.holdingbox').hover(function () {
$('.rightbox').stop().animate({
width : '120px'
}, 400)
}, function () {
$('.rightbox').stop().animate({
width : '-0'
}, 400)
});
HTML:
<div class="holdingbox">
<a href="#">
<div class="margined">
<div class="rightbox">
<div class="content"><p>Következő cikk</p></div>
</div>
<div class="leftbox"> > </div>
</div>
</a>
</div>
CSS:
div {
display : inline-block;
}
.holdingbox {
position: relative;
top: 0;
margin-left: 100px;
}
.leftbox {
position: absolute;
display: inline-block;
height: 36px;
background-color: #ac193d;
color: #FFF;
font-weight: bold;
padding: 1px;
}
.holdingbox a {
text-decoration: none;
color: #FFF;
display: block;
}
.leftbox img {
margin: 0 auto;
margin-top: 10px;
}
.rightbox {
position: relative;
display: inline-block;
overflow: hidden;
width: 0;
height: 50px;
vertical-align: top;
margin-right: 0;
}
.rightbox a {
text-decoration: none;
color: #FFF;
}
.content {
width: 120px;
position: absolute;
background-color: #ac193d;
height: 38px;
text-align: center;
left: 0;
top: 0;
right: 0;
color: #FFF;
}
.content p {
margin-top: 8px;
}
just add position: absolute; right: 0; in .rightbox class.
.rightbox {
display: inline-block;
height: 50px;
margin-right: 0;
overflow: hidden;
position: absolute;
right: 0;
vertical-align: top;
width: 0;
}
Working here - http://jsfiddle.net/PXLJG/7/
I tried to fix up the code you've already got but it needed some major rehauling so I've just re-done it all.
JSFiddle: http://jsfiddle.net/t2z9Q/
CSS
.container {
width: 120px;
position: relative;
overflow: hidden;
color: white;
}
.container .content {
width: 100px;
overflow: hidden;
position: absolute;
left: 120px;
float:left;
z-index: 99;
background: #ac193d;
}
.container .arrow {
float: right;
width: 20px;
position: relative;
color: black;
z-index: 100;
background: #ac193d;
}
JS
$('.arrow').hover(function() {
$('.container .content').stop().animate({left: '0'}, 400)
}, function() {
$('.container .content').stop().animate({left: '120px'}, 400)
});
HTML
<div class="container">
<div class="content">Next Article</div>
<div class="arrow">></div>
</div>
This way you lose a lot of the jargon html & css that isn't really required but still get the same effect.
You are applying inline-block style on all divs. Please revert to normal display of block.
div{
display: block;
}
or just remove it as the default display is block
http://jsfiddle.net/PXLJG/8/
That should solve your core issue.
Now if you want to show the arrow to the left of the text div, remove absolute position on the arrow.
Now you will be having a whitespace between the inline-block elements, that is the arrow and the text. To remove it easily remove the whitespace between those two div in HTML
http://jsfiddle.net/PXLJG/18/
For something exactly like as in the website, you can try positioning both arrow and text using absolute positioning and anchoring them with their right property.
This way, as the width increases it will expand from right to left.
http://jsfiddle.net/PXLJG/20/

Categories