Develop Reference

Place element on top of other (Create overlay)

I'm still a bit new to HTML and CSS and need some help.
I have a div and inside that, I have an telephone input element. The input is using a library that allows the user to select a country code.
The problem is, that when I click on the country code it stays inside the parent div, which is not what I want.
As you can see on the image the desired behaivour is to have the red box outside of the blue one. I have set the parent elements position property to 'relative' (the blue box) and the country code container (the red one) to 'absolute', but it doesn't help. I've also tried changing the z-index without luck.
The red box as shown on the picture has the following styles:
.iti__country-list {
position: absolute;
z-index: 2;
list-style: none;
text-align: left;
padding: 0;
margin: 0 0 0 -1px;
box-shadow: 1px 1px 4px rgb(0 0 0 / 20%);
background-color: white;
border: 1px solid #CCC;
white-space: nowrap;
max-height: 200px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
And the blue one:
.drag-container {
display: grid;
max-height: 600px;
overflow-y: auto;
padding: 10px;
position: relative;
}
I can almost get the desired output by setting position to 'fixed', but thats not good when resizing the page as it stays in its position.

I think the problem is in .drag-container class ... remove overflow:auto or change it to overflow:unset

you can try using the select2.js plugin for select, it creates a dropdown at the end of the body element regardless of the parent's location

All content not visible with div height 100%

I am loading my div content from a php file (15 items) via Jquery. All the content is there once the height of the div is 500px but once I want it to be 100% some of the data is not there. It loads more on scroll when is 500px in height but does not scroll once it is 100%. How may I solve this please? Thank you.
#list {
position: fixed;
top: 50px;
left:0%;
width: 350px;
padding-left: 80px;
height: 1000%;
border: 1px #d3d3d3 solid;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius: 5px;
background-color: #FFFFFF;
box-shadow: 10px 10px -5px #888888;
-moz-box-shadow:10px 10px -5px #888888;
-webkit-box-shadow:10px 10px -5px #888888;
overflow-y: scroll;
}

I believe your issue is caused by the following CSS (I changed the height:1000% that's in your CSS to height:100% as your question describes):
position: fixed;
top: 50px;
height: 100%;
position: fixed tells the browser to keep that element in the same place, regardless of how much the browser window is scrolled.
top: 50px tells the browser to position the element 50 pixels from the top of the browser window.
height: 100% tells the browser to make the height of the element the same height as the browser window (regardless of the top position).
Because position:fixed means that the element doesn't move when the page is scrolled, you're always going to have 50 pixels at the bottom of the element that are always going to be hidden, because the element position is fixed and won't change when you scroll.
If you need your element to always be 50 pixels from the top of the screen and 0 pixels from the bottom of the screen (regardless of scrolling), don't specify a height at all, and instead do:
position: fixed;
top: 50px;
bottom: 0px;

Why does the main content of my website jump?

http://104.193.173.104/modx/contact-information.html
I have the breadcrumb of the website I'm building affix under the top bar when scrolling down. For some reason, the rest of the website content jumps up when the switch happens. Any ideas why?
My breadcrumb CSS:
#breadcrumb {
padding-left: 18px;
margin-bottom: 18px;
box-shadow: 0px -5px 10px #000;
}
#breadcrumb ul {
margin-top: 0;
margin-bottom: 0px;
}
#breadcrumb.affix {
position: fixed;
top: 52px;
width: 100%;
z-index: 499;
box-shadow: 0px -8px 15px #000;
}
The "affix" script:
<script>
// BREADCRUMB AFFIX //
$(function() {
$('#breadcrumb-wrapper').height($("#breadcrumb").height());
$('#breadcrumb').affix({
offset: { top: $('#breadcrumb').offset().top - 51 }
});
});
</script>
And the breadcrumb HTML (I'm using ModX so this might not be of much help):
<div id="breadcrumb">
[[Breadcrumb? &exclude=`2,3,4,5,6,7,8,15`]]
</div>

Because your breadcrumb bar switches between position:relative (in the document flow) and position:fixed (out of document flow).
Things not in document flow do not take up space and other elements will shift to fill the gap. If you want it to be constant, then the best solution might be to make the default positioning position:absolute with an appropriate top value (and some top-margin on the following element) so that by default the element is already outside of document flow.

Having issue with css hover effect

Please take a look at this link. Hover cursor on any movie thumbnail. Have you noticed that, all li elements moving down? How can I fix that problem?
Also, click on any thumbnail, player div will slide down. there is no box shadow under #player_container even if I set it in css files
#player_container{
display:none;
height:510px;
width: 100%;
background-image: url(images/bg/bg_tile.jpg);
margin-top: -510px;
padding-top: 20px;
-moz-box-shadow: 0px 10px 5px #888;
-webkit-box-shadow: 0px 10px 5px #888;
box-shadow: 0px 10px 5px #888;
}

On video add a transparent border seems to fix it
.video {
border: 1px solid transparent;
float: left;
font-size: 11px;
height: 150px;
margin: 0 25px 25px 0;
width: 228px;
}
There is a couple off different way to fix the next part off your question. One quick way is too add another container like
<div style="display: block;" class="gradient sh" id="player_container">
<div class="jquery-youtube-tubeplayer" id="player">
<div id="tubeplayer-player-container1324082555277"><iframe width="853" height="480" frameborder="0" src="http://www.youtube.com/embed/LxBGDijiii0?autoplay=1&autohide=1&controls=1&rel=0&fs=1&wmode=transparent&showinfo=0&modestbranding=0&start=0&theme=dark&color=red&enablejsapi=1&origin=http://tural.us" title="YouTube video player" allowfullscreen=""></iframe></div></div>.
<div class="bottomSpan"></div>
</div>
and put your box shadow on this
.bottomSpan {
box-shadow: 0 10px 5px #888888;
display: block;
height: 17px;
position: absolute;
width: 100%;
}

For me changing the margin on the corresponding < li > would make more sense.

That is because on hover you are adding a border which makes the container 2px bigger
the solution to give the initial class a border
.video {
border: 1px solid #fff
float: left;
font-size: 11px;
height: 150px;
margin: 0 25px 25px 0;
width: 228px;
}
Second Problem:
To make z-index work you need to give it a position:relative property
#player_container {
display: none;
height: 510px;
width: 100%;
background-image: url(images/bg/bg_tile.jpg);
padding-top: 20px;
-moz-box-shadow: 0px 10px 5px #888;
-webkit-box-shadow: 0px 10px 5px #888;
box-shadow: 0px 10px 5px #888;
z-index: 2;
position: relative;
}

You're adding a border when the mouse hovers but not reducing the size of the element. The "height" and "width" of an element, in the W3C box model, describe the size of the contents of a block element. The padding and the border are added to that.
Some browsers allow you to switch back to the "border-box" box sizing model:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
However Internet Explorer wont, I don't think, understand that. Maybe IE9 or 10 would understand:
-ms-box-sizing: border-box;
(You'd put that on the ".video" style.)
edit — as to the problem with the shadow on the player: there's no shadow because there's no room for a shadow. If you make the player box "position: absolute", and correspondingly adjust the content somehow (maybe give the "wrapper" div a big top padding the same as the player size) then you'll see a shadow.
You really should be using something like Firebug to play with the CSS interactively.

I'm afraid your mixing things up a bit:
Your background-image is set on #player-container - if you want #player-container to have a shadow, you'll need an extra containing div for this background. Right now #player-containerdoes have shadow, but since it's 100% wide, and fills the vertical space, the shadow doesn't show.
Your player is exactly 853px x 480px, so you'll have to set #player-container to exactly these dimensions (no padding, no margin, they will be added to the width/height)
Add padding to the extra containing div, which also holds the background.
also (but not so important): #player-container has width:100% - that makes no sense - default is width:auto, so #player-container will automatically take 100% width

2 Minute question - HTML / CSS If div within div expands expand parent div

I have a setup lets say like follows:
<div id="nav">
<div id="innernav">
//With dynamic content here.
</div>
</div>
I am running a script that sizes #nav to the size of the browser window in height. But sometimes my dynamic content is now getting bigger than the height of the window.. Is there a way I can enforce that when #innernav exceeds #nav that #nav will increase in size?
Seen as someone asked for the script:
function resizeWindow(){var a=getWindowHeight();document.getElementById("content").style.height=(a-0)+"px";document.getElementById("nav").style.height=(a-0)+"px";document.getElementById("contentPanel").style.height=(a-10)+"px"}function getWindowHeight(){var a=0;if(typeof(window.innerHeight)=="number"){a=window.innerHeight}else{if(document.documentElement&&document.documentElement.clientHeight){a=document.documentElement.clientHeight}else{if(document.body&&document.body.clientHeight){a=document.body.clientHeight}}}return a};
Changed the script to refer to min-height works perfectly in FireFox. But not IE or Chrome.
CSS:
body {
margin: 0px;
text-align: left;
font-family: Verdana;
font-size: 11px;
background-color: #FFFFFF;
min-width: 980px;
min-height: 10px;
background-image: url('../Images/watermark.png');
background-position: 100% 100%;
background-repeat: no-repeat;
}
.nav {
width: 19%;
margin: 0px 0px 0px 0px;
background-color: #E0EFFF;
float: left;
vertical-align: bottom;
position: relative;
}
some minor changes to my script / using min height seems to work. And after running a CCLEAN IE sort of does what I wanted.

Instead of setting the "height", set the "min-height".

short solution is give height auto to both divs