1

.basket_border {
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    border-right: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    float:left;  
    vertical-align: top;
    padding: 30px 8px 10px 10px;
    position:relative;  
    min-width:25%;  
}
.basket_plus{
    text-align: center;    
    color: #f38104;
    font-size: 1.8em;
    cursor: pointer;
    bottom:-7px;
    position:absolute;
    left:151px;
}

.basket_minus{    
    font-size: 1.8em;
    text-align: center;
    cursor: pointer;
    bottom:-5px;
    left:100px;
    position:absolute;   
}

.basket_number{
    border: 1px solid #eaeaea;   
    text-align:center;
    bottom:-2px;
    position:absolute;
    left:118px;    
    width:25px;
    height: 20px;
    font-size:0.8em ;
    outline:none;
    font-weight:bold;
    box-shadow: inset 4px 4px 2px -2px #bbb,1px 1px 1px 1px #bbb;  
}
<div class="basket_border">
<div class="selected_product_image">
  <img src="images/product/Без имени-1.jpg" alt="" />
</div>
<div class="basket_close">
  <img src="images/menu/bt_close_login_form.png" alt="" />
</div>
<div class="">
  <div class="basket_description"> product description </div>
</div>
<div class="basket_price_block">
  <img src="images/personal_cabinet/basket1.png" class="basket_price_image" alt="" />
  <div class="basket_price">
    <span class="product_price" data-unitprice="4500">4500</span>
    <span>USD</span>
    <div class="basket_minus"> - </div>
    <input class="basket_number" name="basket_number" value="1" />
    <div class="basket_plus"> + </div>
  </div>
</div>
</div>

родитель basket_border имеет свойство relative , а "+" "-" и input имеют absolute , Меняя координаты этих самых абсолютов (а именно сдвигая вправо), они почему - то "вылазят" за пределы basket_border. Не могу понять почему

10
  • 1
    А почему они не должны вылазить за пределы родителя? Это нормальное поведение. Для более точного ответа добавьте css код данного фрагмента. 18 янв 2016 в 12:36
  • обновил вопрос с css
    – ddeadlink
    18 янв 2016 в 12:39
  • Ага, спасибо. Кажется тут всё весьма логично и в порядке нормы. Пожалуйста расскажите в чем именно проблема и какую задачу вы хотите решить? 18 янв 2016 в 12:42
  • нужно просто подвинуть классы с абсолютами правее на пикселей 20-30, ( но в случае масштабирования экрана в + они вылазят за пределы бордера )
    – ddeadlink
    18 янв 2016 в 12:44
  • позиционируйте от правого угла элементы - не через left, а через right например
    – lexxl
    18 янв 2016 в 12:49

1 ответ 1

1

решил следующим образом: нужно блоки absolute обернуть в отдельный div, который будет за пределами basket_border и отдельно его позиционировать

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.