Позиция div в левом нижнем углу

Как перемещать внутренний div sqrBall в левом нижнем углу родительского div container. Вот HTML код:Позиция div в левом нижнем углу

<div class="container"> 
    <div class="sqrBall"> 

    </div> 
</div>

Вот это CSS:

.container{ 
     width: 500px; 
     height: 500px; 
     border: 1px solid black; 
     margin: 0 auto; 
    } 
    .sqrBall{ 
     width: 10px; 
     height: 10px; 
     background-color: blue; 

    }

Вот DEMO

источник

2015-03-02 iJade

http://jsfiddle.net/z8goh9jd/1/ –

@NaeemShaikh Я довольно много нового CSS, так что просто интересно, если какой-либо другой способ сделать это без использования относительного и абсолютного позиционирования – iJade

Вы можете использовать абсолютное позиционирование на внутреннем элементе, если родительский элемент имеет относительное позиционирование , например:

.container{ 
    width: 500px; 
    height: 500px; 
    border: 1px solid black; 
    margin: 0 auto; 
    position:relative; 
} 

.sqrBall{ 
    width: 10px; 
    height: 10px; 
    background-color: blue; 
    position:absolute; 
    bottom:0; 
    left:0; 
}

n.b. если родительский элемент не расположен относительно, внутренний элемент будет расположен в левом нижнем углу тела, а не его родителя. (по крайней мере, в данном примере)

источник

2015-03-02 08:33:43 atmd

попробовать это демо Fiddle

.sqrBall { 
width: 10px; 
height: 10px; 
background-color: blue; 
position: absolute; 
top: 98%; 
left: 0; 
    } 
.container 
{ 
position:relative; 
}

источник

2015-03-02 08:35:12 priya786

.container { 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    margin: 0 auto; 
 
    position: relative /* Container should have relative position */ 
 
} 
 
.sqrBall { 
 
    position: absolute; /* Child should have absolute position */ 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 30px; 
 
    height: 30px; 
 
    background-color: blue; 
 
}

<div class="container"> 
 
    <div class="sqrBall"> 
 

 
    </div> 
 
</div>

источник

2015-03-02 08:35:19

.container{ 
     width: 500px; 
     height: 500px; 
     border: 1px solid black; 
     margin: 0 auto; 
     position:relative; 
    } 
    .sqrBall{ 
     width: 10px; 
     height: 10px; 
     background-color: blue; 
     position:absolute; 
     bottom:0; 
     left:0; 

    }

источник

2015-03-02 08:35:54 zenbormi

Попробуйте так: Demo

Добавьте следующие вместе с кодом

CSS:

.container {  
    display:table; 
} 
.sqrBall {  
    float:left; 
    margin-top: 100%; 
}

источник

2015-03-02 08:40:19

Вы должны добавить еще два свойства к существующему классу .sqrBall

свойства являются ...

position: relative; 
top: 98%;

Ниже приведена рабочая демонстрация, надеюсь, вам это поможет

<style type="text/css"> 
 
.container 
 
{ 
 
    width: 500px; 
 
    height: 500px; 
 
    border: 1px solid black; 
 
    margin: 0 auto; 
 
} 
 
.sqrBall 
 
{ 
 
    background-color: blue; 
 
    height: 10px; 
 
    position: relative; 
 
    top: 98%; 
 
    width: 10px; 
 
} 
 
</style> 
 

 

 

 
<html> 
 
<div class="container"> 
 
\t \t <div class="sqrBall"> 
 

 
\t \t </div> 
 
\t </div> 
 

 
</html>

источник

2015-03-02 08:45:33

Позиция div в левом нижнем углу

ответ

Смежные вопросы