[I want to make my work look like this][1]
[But my work is now like this][2]
The vertical grey line is the web border, all other divs' width would not exceed that line.
Now users might drag and see the rest of the image. It would be much better if the exceeded part of the image is hidden.
So here is my code:
html:
<div class="container-div">
<img class="the-img" src="image.png" alt="">
</div>
css:
.container-div {
text-align: right;
position: relative;
}
.the-img {
position: absolute;
overflow: hidden;
width: 100%;
height: auto;
margin-top: 1vh;
margin-left: -75.5vw;
}
Also, all the parent div of .container-div in my exact code are already position: relative;
How do I fix this? Thanks!
[1]: https://i.stack.imgur.com/glA2q.png
[2]: https://i.stack.imgur.com/LcBpO.png
Have you tried adding overflow: hidden on the .container-div?
You definitely should put overflow: hidden on the parent element.
Then you should set a height to it, your browser can't set a correct height on the parent element because its child doesn't have any (because of absolute position).
.container-div {
text-align: right;
position: relative;
overflow: hidden;
height:200px;
}
.the-img {
position: absolute;
width: 100%;
height: auto;
margin-top: 1vh;
margin-left: -75.5vw;
}
Related
We have a modal with position: fixed and overflow-y: auto.
This works well when we have lots of components that overflow since then the scroll bar is shown.
However when we have a custom calendar field inside the modal which opens a popup/dropdown calendar and that element is outside one of the sides of the container, it's not shown.
Is there a way to make the popup/dropdown shown while keeping the overflow-y: auto of the modal? Like so:
Codepen to elaborate: http://codepen.io/anon/pen/jWmNMa
.modal {
position: fixed;
background-color: pink;
height: 200px;
width: 200px;
left: 30%;
/* comment out this to show dropdown*/
overflow: auto;
}
.dropdown {
background-color: lime;
height: 80px;
width: 80px;
position: absolute;
left: -50px;
}
html:
<div class="modal">
<div class="dropdown">
This is content in a dropdown.
</div>
Long long overflowing text...
</div>
In your case, it's not possible for an absolutely positioned child element to appear outside of the parent .modal element when it has overflow: auto set on it (unless you set the position of the .dropdown element to fixed).
The easiest work-around would be to wrap the text and other contents, and then set overflow: auto on that element. For instance, you could wrap it with a .content element, and then set height: 100% and overflow: auto in order to add a scrollbar and hide the overflow for those specific elements.
Updated Example
<div class="modal">
<div class="dropdown">
This is content in a dropdown.
</div>
<div class="content">...</div>
</div>
.modal {
position: fixed;
background-color: pink;
height: 200px;
width: 200px;
left: 30%;
}
.modal .content {
height: 100%;
overflow: auto;
}
This worked for me.
Of course, you're limited by the inconvenient effect of position:fixed; but this does achieve your desired result.
.dropdown {
background-color: lime;
height: 80px;
width: 80px;
position: fixed;
margin-left:-50px;
}
Hope that helps.
Firstly, I know this may seem like a duplicate of Positioning child content outside of parent container, but this is slightly different.
I've only had success floating an image outside of its parent container if I use an absolutely positioned div with the background-image set. Example of code used to achieve this:
.image {
position: absolute;
top: 0;
left: 0;
margin-top: -30px;
margin-left: -10px;
display: block;
height: 200px;
width: 140px;
}
Now I need to achieve the same with an <img /> element. What I'm hoping to achieve is something like this:
So the image should actually spill over on the left and right of the parent container. I've tried similar methids as given above, but without success. Any advice?
something like this?
.parent {
display:inline-block;
width: 100px;
height: 300px;
background-color:lightgray;
margin-left: 100px;
}
.child {
width: 200px;
height:100px;
border-radius: 100px;;
background-color:gray;
position:abolute;
margin-left: -50px;
margin-top:100px;
}
<div class='parent'>
<img class='child'/>
</div>
edit: as per the comments below this is what i see
See the method bellow
Wrap the image in a DIV
Add border-radius to achieve the egg like shape
Add overflow with a value of hidden to the image container
use an image that's bigger than it's container so that it will take on the egg like shape.
#square {
width: 300px;
height: 300px;
background-color: #6D9BBE;
position: relative; /* Relative to curtail overlap */
margin: 0 auto;
}
#square #eggy {
width: 380px;
height: 200px;
background-color: #8500B2;
border-radius: 50%;
position: absolute;
top: 50px;
left: -40px;
overflow: hidden;
}
#eggy img {
width: 390px
height: 240px;
}
<div id="square">
<div id="eggy"><img src="http://s9.postimg.org/xnmcpb0jz/use_this.png"/></div><!-- End Eggy -->
</div><!-- End Square -->
I wonder whether it's totally impossible to bleed a nested div when the container is positioned relative and has overflow set to hidden?
Giving the nested div a fixed position is not an alternative in this case.
Please take a look at this example: http://jsfiddle.net/s7nhw/11/.
Anyone who knows how to do this?
I'll appreciate any feedback!
<div class="container">
<div class="nested-div"></div>
</div>
<style>
.container {
margin: 0 auto;
width: 100px;
height: 100px;
background: green;
overflow: hidden;
position: relative;
}
.nested-div {
width: 200px;
height: 100px;
background: red;
z-index: -1;
position: absolute;
}
</style>
I've never encountered a situation where one could override {overflow: hidden}. You'll probably need to restructure your HTML to place the nested div outside its parent in the code, then use absolute positioning and z-index to position it behind the current wrapper.
http://jsfiddle.net/s7nhw/13
.container {
width: 100px;
height: 100px;
background: green;
overflow: hidden;
position:absolute;
left: 50%;
margin-left: -50px;
}
.nested-div {
width: 200px;
height: 100px;
background: red;
z-index: -1;
margin: 0 auto;
position: absolute;
left: 50%;
margin-left: -100px;
}
<div class="nested-div"></div>
<div class="container"></div>
Here's some further discussion: override overflow:hidden with z-index
Absolute position child elements always remain under relative position parent element
How do I vertically center align the parent container to the canvas which has position:relative? The parent container has a child element with position:absolute. The child element has been positioned in the center of the parent container.
Here's a snippet:
.container {
position: relative;
width: 300px;
height: 300px;
background-color: red;
margin: auto;
}
.item {
position: absolute;
width: 100px;
height: 100px;
background-color: blue;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
<div class="container">
<div class="item"></div>
</div>
One solution is to wrap your .container with two wrappers; give the first one display: table; and height: 100%; width: 100%; and the second display: table-cell; and vertical-align: middle;. Also make sure your body and html have full height.
Here's a little working demo: little link.
Another method is to apply top: 50%; to your .container and margin-top: -150px; (300px / 2 = 150px). (Note that this method requires you to know the exact height of your container, so it might not be exactly what you want, but it might as well be!). A little working demo of this latter method: another little link.
I hope that helped!
I have an issue where I want to display a header in the top left of a DIV. If I set the parent to relative and the inner div to absolute I can then position it so the backgroundimage goes top right so it looks like this:
http://www.landingapollo.com/random/stackover1.png
That works correctly. However, in another instance it is not working correctly because the parent container has its overflow set to hidden. It thus displays like this:
http://www.landingapollo.com/random/stackover2.png
Relevant code:
This is the main container
.container {
overflow: hidden;
position: relative;
float: right;
width: 650px;
margin-left: 5px;
margin-right: 7px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
This is the title background
#pinnedthree_title {
position: absolute;
width: 200px;
height: 30px;
background: url('images/headers/latestnewsheader.png') no-repeat left;
z-index: 100000;
top: -20px;
}
If you give the parent container the correct height it will show your content even though you are using overflow: hidden;
An absolute element will not push a relative element to the correct size.
Basically if your relative container was holding only your absolute container then it would have a height of 0 because it doesn't contain anything that will increase its height.
Because of this when you use overflow: hidden; it will hide anything that goes past the height of the relative container (In my example 0)
So try giving your relative container the correct height and see if that works.
I think You will need another div to achieve the effect that you want.
<div class="floater">
<div class="container">...</div>
<div id="pinnedthree_title">...</div>
</div>
.floater {
overflow: visible
position: relative;
float: right;
width: 650px;
margin-left: 5px;
margin-right: 7px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.container {
overflow: hidden;
position: absolute
width: 650px;
}
#pinnedthree_title {
position: absolute;
width: 200px;
height: 30px;
background: url('images/headers/latestnewsheader.png') no-repeat left;
z-index: 100000;
top: -20px;
}