I want to absolute position an image that I will be moving around in a div and want anything that extends outside the div to be clipped. Here is an example of the problem:
<html>
<body>
<div style="width: 500px; height: 200px; border: 1px solid black; overflow: hidden;">
<div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div>
<div style="position: absolute; top: 10px; left: 250px; z-index: -1;"><img src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div>
</div>
</body>
</html>
So, I want the right edge of the logo to not display. Ideas?
Try adding position: relative to your outer div. This will position the image relative to that div (honoring the overflow style) instead of relative to the page.
Example:
<html>
<body>
<div style="position: relative; width: 500px; height: 200px; border: 1px solid black; overflow: hidden;">
<div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div>
<div style="position: absolute; top: 10px; left: 250px; z-index: -1;"><img src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div>
</div>
</body>
</html>
See it on JS Bin
Since the image's container is positioned absolutely, it is outside of the flow of the "containing" div.
Your choices are to either position relatively or to adjust the dimensions of the absolutely-positioned div, dynamically, with jQuery.
Move the position absolute to the image, then add the relative to the parent container. Worked for me in a similar situation.
<html>
<body>
<div style="width: 500px; height: 200px; border: 1px solid black; overflow: hidden;">
<div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div>
<div style="position: relative; overflow:hidden;"><img style="position: absolute; top: 10px; left: 250px; z-index: -1;" src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div>
</div>
</body>
</html>
Related
I have a child div, who's position is absolute and the left property is like -20px (just negative). The parent div has overflow:scroll but it does not allow to scroll to the left.
I've tried to delete parents or add wrappers, tried without the position properties, etc...
html
<div class="container">
<div class="levels">
<div class="level">
<div class="node">Node1</div>
<div class="node">Node2</div>
<div class="node">Node3</div>
<div class="node">Node4</div>
<div class="node">Node5</div>
</div>
</div>
</div>
css
.container {
border: 1px solid red;
margin: 20px;
height: 200px;
width: 900px;
overflow: scroll;
}
.levels {
width: 100%;
height: 100%;
position: relative;
}
.level{
border: 2px solid black;
width: 536px;
position: absolute;
left: -20px;
}
.node {
background-color: blue;
border: 2px green solid;
width: 100px;
display: inline-block;
}
I've simulated a scenario in a CodePen
Id like to have more of those 'level' divs and even more aligned to the left, so i can simulate like a flow tree. If this isn't the way to go i'd like to hear.
I have following html structure. I would like to show the "green" colored absolute div on top of "container" div.
<h4>
CSS Position Issue
</h4>
<div id="container" style="overflow: auto;height:55px;width:200px;border:3px solid blue;position:relative">
<ul>
<li>
<div style=";border:1px solid blue;">
<div style="height: 100px; width: 100px; background: red;">
if there is some really long content here, it will cause overflow, but the green box will not
<div style="position:absolute; z-index:-1; left: 60px; top:0; height: 220px; width: 120px; background: green;">
</div>
</div>
</div>
</li>
</ul>
</div>
Below is the output of this.
I would like to show the green colored absolute div( which is inside of parent div) to be shown outside of parent "container" div.
Below is the desired output screenshot.
I am looking for pure css solution no scripting at all.
Setting overflow of #container to initial could solve your issue. check below snippet for reference.
#container {
overflow: ;
height: 55px;
width: 200px;
border: 3px solid blue;
position: relative
}
.border {
border: 1px solid blue;
}
.parent {
height: auto;
width: 100px;
background: red;
}
.child {
position: absolute;
z-index: -1;
left: 60px;
top: 0;
height: 220px;
width: 200px;
background: green;
}
<h4>
CSS Position Issue
</h4>
<div id="container">
<ul>
<li>
<div class="border">
<div class="parent">
if there is some really long content here, it will cause overflow, but the green box will not
<div class="child">
</div>
</div>
</div>
</li>
</ul>
</div>
Can't get what is your exact issue is, be more clear..But still you can try this.
<h4>CSS Position Issue</h4>
<div id ="container" style="overflow: auto; height: 55px; width: 200px; border: 3px solid blue;position:relative">
<ul>
<li>
<div style="border: 1px solid blue;">
<div style="height: 100px; width: 100px; background: red;">
if there is some really long content here, it will cause overflow, but the green box will not
<div style="position:absolute; z-index:-1; left: 0px; top:0; height: 220px; width: 120px; background: green;">
</div>
</div>
</div>
</li>
</ul>
</div>
Hope this will help you.
Hy guys.
I have a situation of overlay div inside another div.
Why the main div not fit the height size when i using position relative in a inner div to create a overlay.
See the picture
I cannot use position: absolute because i need the scroll working inside the main div.
See the code:
div.main
{
width: 300px; height: auto;
border: solid 1px black; overflow: auto;
}
div.box1
{
width: 350px; height: 50px; border: solid 1px red;
}
div.box2
{
position: relative; top: -52px; left: 0px; z-index: 1;
width: 350px; height: 50px; border: solid 1px green;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<div class="box1">box 1</div>
<div class="box2">box 2 - overlay</div>
</div>
</body>
</html>
I can use another css settings but i need to sinc the scroll of the inner divs.
If I understand your question correctly, this is what you need:
div.main
{
width: 300px; height: auto;
border: solid 1px black; overflow: auto;
position: relative;
}
div.box1
{
width: 350px; height: 50px; border: solid 1px red;
}
div.box2
{
position: absolute;
top: 0;
left: 0px;
z-index: 1;
width: 350px;
height: 100%;
background: rgba(0,0,0,0.5);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<div class="box1">box 1</div>
<div class="box2"></div>
</div>
</body>
</html>
position: relative still keeps the original space free for its element - it only moves the element away from its original position by the top/bottom/left/right values. But the free space is still where it is without those settings. A wrapping container with aut height will act as if the relatively positioned element still were at its original position, causing what you brought up in your question.
So to force a solution as you seem to want it, you'll have to use a fixed height and overflow-y: hidden on your container element.
div.main {
width: 300px;
height: 52px;
border: solid 1px black;
overflow-y: hidden;
}
div.box1 {
width: 350px;
height: 50px;
border: solid 1px red;
}
div.box2 {
position: relative;
top: -52px;
z-index: 1;
width: 350px;
height: 50px;
border: solid 1px green;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<div class="box1">box 1</div>
<div class="box2">box 2 - overlay</div>
</div>
</body>
</html>
Why don't #img1 and #canvas1 fully overlap in the below code? I want them in exactly the same place. I'm layering images with JavaScript animation on canvas. Initial thoughts were that the padding or margin default settings were interfering somewhere. I've tried setting to zero for all elements - it doesn't work. I understand that position:relative positions an element relative to it's normal position. Clearly missing a default setting or something obvious.
<!DOCTYPE html>
<html>
<head>
<style>
.chapter {
width: 90%;
margin: 0 auto;
max-width: 1000px;
border: 1px solid red;
}
#img1 {
border: 1px solid green;
position: relative;
left: 50px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
#canvas1 {
border: 1px solid blue;
position: relative;
left: -50px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div class="template" id="T2">
<div class="chapter" id="C2">
<h1>Why can't I overlap the below elements?</h1>
<img src="" id="img1" />
<canvas id="canvas1"></canvas>
</div>
</div>
</html>
Two things to do:
1.) Don't leave a linebreak or space between the two elements in the HTML code (see below)
2.) Set the left setting for canvas to -52px - you have to consider the 2 x 1px border of the image.
.chapter {
width: 90%;
margin: 0 auto;
max-width: 1000px;
border: 1px solid red;
}
#img1 {
border: 1px solid green;
position: relative;
left: 50px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
#canvas1 {
border: 1px solid blue;
position: relative;
left: -52px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
<div class="template" id="T2">
<div class="chapter" id="C2">
<h1>Why can't I overlap the below elements?</h1>
<img src="" id="img1" /><canvas id="canvas1"></canvas>
</div>
</div>
A couple of remarks:
use box-sizing: border-box for 'easier' sizing. With border-box the border width and padding are substracted from the elemenent istead of added on to it. An element with width: 100px, a border-width of 1px and a padding of 10px will be 100 + (2 * 1) + (2 * 10) = 122px wide without box-sizing: border-box but the element will be 100px wide even with the border-width and padding when the box-sizing is set to border-box. See here for a (better) more detailed explanation: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
When trying to overlap element I find it easiest to keep the surrounding container element as empty as possible. Taking out the h1 element makes overlapping a lot more manageable.
Change the position of the canvas element to absolute. This way it no longer takes up place in the DOM and it is positioned in the upper left container of its positioning parent (in your example the div.chapter in my answer the div.container). This also helps when trying to have elements line up.
* {
box-sizing: border-box;
}
.container {
position: relative;
}
.chapter {
width: 90%;
margin: 0 auto;
max-width: 1000px;
border: 1px solid red;
}
#img1 {
border: 1px solid green;
position: relative;
left: 50px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
#canvas1 {
border: 1px solid blue;
position: absolute;
left: 50px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
<div class="template" id="T2">
<div class="chapter" id="C2">
<h1>Why can't I overlap the below elements?</h1>
<div class="container">
<img src="" id="img1" />
<canvas id="canvas1"></canvas>
</div>
</div>
</div>
#img1 {
border: 1px solid green;
position: relative;
left: 56px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
this worked...
There are certainly better ways to achieve the effect you're going for but to answer your question, I believe the spacing is being caused by the default font size on the parent element. Set the font size to 0px on the chapter div and you can see the elements now overlap each other.
Please see JSfiddle:
http://jsfiddle.net/76yKL/
Is there a way to align "ruler-mark-short" and "ruler-mark-high" divs to the bottom and center of their parents("ruler-mark-container") ?
Since width of "ruler-mark-short" and "ruler-mark-high" can be changed dynamically by JavaScript, I can't use 'margin' or 'left' in pixels.
So, I have to use something like "margin: 0 auto" or "text-align: center", but non of this works.
I'm struggling with aligning ruler-marks to both bottom and center without using additional wrapper container.
Any help is appreciated, thanks.
Code From JSfiddle above:
HTML:
<div class="container">
<div class="ruler">
<div class="ruler-mark-container">
<div class="ruler-mark-high"></div>
</div>
<div class="ruler-mark-container">
<div class="ruler-mark-short"></div>
</div>
<div class="ruler-mark-container">
<div class="ruler-mark-short"></div>
</div>
<div class="ruler-mark-container">
<div class="ruler-mark-short"></div>
</div>
<div class="ruler-mark-container">
<div class="ruler-mark-short"></div>
</div>
<div class="ruler-mark-container">
<div class="ruler-mark-high"></div>
</div>
</div>
</div>
CSS:
.container {
border: 1px solid grey;
position: absolute;
width: 700px;
height: 200px;
}
.ruler {
border: 1px solid orange;
position: absolute;
width: 100%;
height: 100px;
bottom: 0px;
}
.ruler-mark-container {
border: 1px solid blue;
position: relative;
width: 30px;
height: 100%;
/*display: inline-block;*/
float: left;
bottom: 0px;
}
.ruler-mark-high {
position: absolute;
border: 1px solid black;
background-color: grey;
bottom: 0px;
width: 3px;
height: 50px;
}
.ruler-mark-short {
position: absolute;
border: 1px solid black;
background-color: grey;
bottom: 0px;
width: 3px;
height: 25px;
}
text-align:center does not work with absolutely positioned elements. So remove absolute position, and format them using display:inline-block.
Without absolute positioning, they won’t be at the bottom any more of course. To fix that, stop floating the container elements, and display them as table-cell instead, and add vertical-align:bottom to both containers and markers.
http://jsfiddle.net/76yKL/7/
You just need to add the following css:
.ruler-mark-short, .ruler-mark-high{
left: 50%;
margin-left: -1.5px;
}
Working Fiddle
UPDATED: (IE9+)
.ruler-mark-short, .ruler-mark-high{
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
/* Add other vendor prefixes here */
}
Working Fiddle