I have a table structure and I need the nested element to take all the size of the table cell div. So I put it to absolute and define all its positions to 0, it works great on FireFox and Chrome but not on IE :(
Here is the markup :
<div class="table">
<div class="cell">
<figure class="illustration">My illustration</figure>
</div>
</div>
The CSS :
.table {
display: table;
width: 400px;
}
.cell {
position: relative;
display: table-cell;
height: 600px;
background-color: grey;
}
.illustration {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: red;
color: #fff;
}
Here is my pen :
http://codepen.io/balix/pen/qEMwzj
If you see the red background it's ok ;)
Any hack for IE ?
I had the same problem.
In case some one is still looking for a workaround you need to create a container inside .cell with
.cell > div{
height:100%;
width:100%;
position:relative;
}
It's not a position problem, your figure just has zero height. I simply inserted height: 300px into the illustration class and now it works fine on IE:
.illustration {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: red;
color: #fff;
height: 300px;
}
http://codepen.io/anon/pen/QwVRoE
In a real code you sure will have some image inside the figure tag so it should be no problem.
Related
I'm trying to develop table with fixed header and fixed sevelar columns.
I use position: sticky for this and it works well in Chrome/Safari/Firefox, but I found issue in Microsoft Edge.
If you create element with position:sticky; top: 0; and insert other element with position: sticky; left: 0;, Edge ignores nested element.
Open this example in Edge and check this: https://codepen.io/finethanks/pen/aRWByx
Is it a bug of Edge?
.wrapper {
border: 1px solid #ccc;
width: 200px;
height: 200px;
overflow: auto;
}
.content {
width: 1000px;
height: 1000px;
}
.sticky-wrapper {
height: 30px;
background: red;
position: sticky;
top: 0;
}
.item {
width: 50px;
height: 20px;
background: yellow;
position: sticky;
left: 0;
}
<div class="wrapper">
<div class="content">
<div class="sticky-wrapper">
<div class="item"></div>
</div>
</div>
</div>
"sticky" value not supported in Edge version less than 16.
Please see the browser compatibility of position css property on this link: https://developer.mozilla.org/en-US/docs/Web/CSS/position#Browser_compatibility
This is so strange that I can't even replicate the error in jsfiddle despite copy-pasting the code.
Basically I have it like this:
<div class="container">
<div class="absolute-background" />
<div class="where-is-this" />
</div>
With this CSS:
.container {
background: transparent;
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.absolute-background {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: blue;
z-index: 0;
}
.where-is-this {
height: 100px;
width: 100%;
z-index: 1000000;
background: red;
}
This should display a red box at the top of the screen, as it does in this fiddle: https://jsfiddle.net/Lmj6d625/
However, in my actual page (on the same browser) the blue covers EVERYTHING. I can even add new divs below with text and they are completely hidden.
Screenshot:
Where is my div?!
Anyone have any suggestions how to troubleshoot this?
The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed).
There is also position: sticky; that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.
Thanks to Evert for this answer
1.) DIV Tags can't be self closing
2.) You need a height for the body tag, otherwise it will have 0 height, and that will also apply to container and .absolute-background, making them invisible.
3.) You need position: absolute or position: relative for the z-index of the red DIV to become effective (fixed would also work, but then it wouldn't scroll with the rest of the page)
html,
body {
height: 100%;
margin: 0;
}
.container {
background: transparent;
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.absolute-background {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: blue;
z-index: 0;
}
.where-is-this {
position: absolute;
height: 100px;
width: 100%;
z-index: 1000000;
background: red;
}
<div class="container">
<div class="absolute-background"></div>
<div class="where-is-this"></div>
</div>
I know it's redundant question, but answers which I saw are unbelievable. Multiple lines for such easy task? No way.
I want to keep img at the end of page (not at the end of displayed screen - I have this issue now).
current, wrong code:
#footerimg {
position: absolute;
right: 0px;
bottom: 0px;
z-index:-2;
}
I need a situation, when I will not be able to see the image until I scroll at the bottom of page.
I can't believe that there is no such option in CSS like bottom-page:0px
EDIT:
Meet CSS transform property - apply transform: translateY(100%).
See demo below:
#footerimg {
position: absolute;
right: 0px;
bottom: 0px;
z-index:-2;
transform: translateY(100%);
}
<img id="footerimg" src="http://placehold.it/200x200"/>
EDIT:
Looking at the image added to the question, I think you don't need positioning - just put the img as the last element in the html markup.
A possible solution can be this:
.content {
height: 120vh;
}
section {
text-align: right;
}
img {
vertical-align: top;
}
<section class="content"></section>
<section>
<img id="footerimg" src="http://placehold.it/200x200" />
</section>
You need to define positioned relative block-level element at the end of body. This will create new block formatting context and all inside absolute positioned elements will be placed relatively to it.
Look at snippet example:
body {
width: 100%;
}
.blk1 {
display: block;
width: 100%;
height: 500px;
background: orange;
}
.blk2{
display: block;
width: 100%;
height: 300px;
position: relative;
background: #9c9;
}
img.btm {
position: absolute;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity 1s ease;
}
.blk2:hover .btm {
opacity: 1;
}
<div class="blk1">
</div>
<div class="blk2">
<img src="//placehold.it/100/100" class="btm">
</div>
Here is another solution:
body {
width: 100%;
position: relative;
}
.blk1 {
display: block;
width: 100%;
height: 200vh;
background: orange;
}
body:after {
content: "";
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 100px;
background-image: url('//placehold.it/100/100');
}
<div class="blk1">
</div>
So you can just add position: relative to body css styles
body {
position: relative;
}
and add body:after:
body:after {
content: "";
display: block;
position: absolute;
bottom: 0;
right: 0;
background-image: url('//placehold.it/100/100');
}
Your question is little bit making confusing me you mentioned in your question like that: "when I will not be able to see the image until I scroll at the bottom of page."
Then I think you do not need any effort you need just place image under footer container, when you will go bottom then you will be found at bottom of the page and this is very traditional way no need any tricky code for that.
I'm creating a basic webpage, but for the footer there is going to be a slanted edge that will run at the bottom of the page. Where I am having issues as you are unable to add 100% on a border, as i am using bootstrap, so the page must be responsive. Is there a way to achieve this affect whilst being responsive.
div {
width:200px;
height:80px;
background: red;
top:150px;left:100px;
position: relative;
}
div:before {
content: '';
position: absolute;
top: 40px; right: 0;
border-right: 200px solid white;
border-top: 40px solid red;
width: 20;
}
http://jsfiddle.net/2bZAW/3675/
This should work for you. Again, I've used a pseudo element in order to alter the color, but the general consensus is the same. Both the linked question and this use overflow:hidden on the parent and hence won't scroll. As for rotating, since I've used a pseudo element, this should not be an issue:
.wrap {
height: 500px;
width: 100%;
display: inline-block;
position: relative;
overflow: hidden;
z-index: 8;
}
.wrap:after {
content: "";
position: absolute;
height: 130%;
width: 100%;
transform: skewY(-4deg);
background: tomato;
top: -50%;
z-index: -2;
left: 0;
}
.lower {
position: absolute;
bottom: 15%;
right: 0;
}
<div class="wrap">
Hello, World!
<div class="lower">Wanted text here?</div>
</div>
Here is my html
<div class="container">
<img src="something" class="avatar"/>
<div class="edit_photo">Edit</div>
</div>
"edit_photo" has an image on it's background. the img tag dimensions is not set so it could be anything. But I want the "edit_photo" div to always be on the bottom right corner of the img. Is this possible with css? I can't think of a way to do this. the img tag needs to always be an img tag and I can't change it to a div.
Thank you!
I think this may be possible:
CSS:
.container{
position: relative;
display: inline-block;
}
img{
background: red;
height: 120px;
width: 250px;
}
.edit_photo{
position: absolute;
bottom: 0;
right: 0;
background: blue;
height: 25px;
width: 25px;
}
Here's a JSFiddle to see: http://jsfiddle.net/gW9PK/
You might need to play around with the .edit_photo and nudge it up a little bit.
The container should be position: relative; and the edit_photo position: absolute; like this:
.container {
position: relative;
/* inline-block for 100% of child width */
display: inline-block;
border: 3px solid #ddd;
}
img {
/* for 100% height of the container */
display: block;
}
.edit_photo {
position: absolute;
right: 5px;
bottom: 10px;
/* Some color */
background: red;
padding: 2px 4px;
border-radius: 3px;
color: white;
}
UPDATED DEMO WITH MULTIPLE IMAGES: http://jsfiddle.net/HYQLQ/3/
write this code in css
.container{
position: absolute;
}
.edit_photo{
position: absolute;
bottom:0px;
right:0px;
widht:20px;
height:20px;
}
edit_photo
{
bottom:-600
top:30px;
right:5px;
}
play with the numbers.