CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ankit Ladhania
Ankit Ladhania

Reputation: 995

Having difficulty in position a div that slides using CSS

Please look at this Fiddle. As you wil see that the cost div is positioned relatively but I want to position it absolutely. However positioning it absolutely send it to the bottom of the page.

.wrapper
{
width:200px;
height:200px;
border:solid 2px red;
}
.container
{
width:200px;
height:200px;
background-color:#000;
position:;
}
.image
{
position:;
top:0px;
left:0px;
background-image:url(http://www.sat2home.com/satspacer//mobile/MobileTV.jpg);
background-position:50% 50%;
background-size:contain;
background-repeat:no-repeat;
z-index:1;
}
.cost
{
position:relative;
height:30px;
left:0px;
right:0px;
bottom:0px;
background-color:red;
color:#000;
font-size:13px;
padding-top:170px;
transition:all linear 0.5s;
-moz-transition: all linear 0.5s;
-webkit-transition: all linear 0.5s;
z-index:-1;
}

Upvotes: 1

Views: 73

Answers (5)

leoMestizo
leoMestizo

Reputation: 1499

Try to put the follow rule in your div.container:

div.container { position: relative; }

Here's a DEMO:

Upvotes: 0

Shailender Arora
Shailender Arora

Reputation: 7778

Hey Ankit you can give the position:relative; to your container div and than if you will give the position:absolute; to your cost div so it will not go to the bottom of the page see the updated css :-

Basically if your parent div is with position:relative; and your child div with position:absolute; so therefore your child div will be under the control of your parent div and will not go automatically anywhere out of the parent div

CSS

.wrapper
{
    width:200px;
    height:200px;
    border:solid 2px red;
}
.container
{
    width:200px;
    height:200px;
    background-color:#000;
    position:relative;
}
.image
{
    position:;
    top:0px;
    left:0px;
    background-image:url(http://www.sat2home.com/satspacer//mobile/MobileTV.jpg);
    background-position:50% 50%;
    background-size:contain;
    background-repeat:no-repeat;
    z-index:1;
}
.cost
{
    position:absolute;
    height:30px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color:red;
    color:#000;
    font-size:13px;
    padding-top:170px;
    transition:all linear 0.5s;
    -moz-transition: all linear 0.5s;
    -webkit-transition: all linear 0.5s;
    z-index:-1;
}

DEMO

Upvotes: 0

Ishank
Ishank

Reputation: 2926

.cost
{ 
    position:absolute;
    width:200px;
    height:30px;
    top:200px;
    left:10px;
    right:0px;
    /*bottom:0px;*/
    background-color:red;
    color:#000;
    font-size:13px;
    /*padding-top:170px;*/
    transition:all linear 0.5s;
    -moz-transition: all linear 0.5s;
    -webkit-transition: all linear 0.5s;
    z-index:-1;
}

Did some modifications in ur fiddle- Here

Upvotes: 0

Praveen
Praveen

Reputation: 56501

adding position:relative; to container class does the trick.

.container
{
width:200px;
height:200px;
background-color:#000;
position:;
}

Add position: absolute to the cost class

.cost
{
    position:absolute;
    height:30px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color:red;
    color:#000;
    font-size:13px;
    padding-top:170px;
    transition:all linear 0.5s;
    -moz-transition: all linear 0.5s;
    -webkit-transition: all linear 0.5s;
    z-index:-1;
}

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55740

You need to set .wrapper elements position to either relative or absolute.

.wrapper
{
    width:200px;
    height:200px;
    border:solid 2px red;
    position:relative;
}

Because absolute elements are positioned based on the closest ancestor that is absolutely or relatively positioned.

This should even work if you set the same for .container element

Check Fiddle

Upvotes: 1

Related Questions