Как задать фиксированный размер блоку, чтобы он не изменялся при масштабировании, и сместить его в нужное место?

[Дмитрий134]

Здравствуйте. Только недавно начал изучать программирование и столкнулся с такой проблемой. Каким способом можно закрепить блок в одном месте, чтобы он не менял расположение при масштабировании? При этом он должен находиться в обозначенной красной рамкой области. Прошу не ругать за банальный вопрос, несколько дней пытаюсь решить проблему с помощью гугла, но не выходит. Спасибо за внимание!

 .odcatwall {
    background: #fff;
    overflow: auto;
    display: block;
    padding: 10px;
    text-align: center;
    font-size:1.4em;
    border:1px solid #ddd;
    margin-bottom:20px;

  }

.odcatwallhref {
    padding-top:10px;
}


}   
</style>
<div class="row">
  {% for category in categories %}
    <div class="product-layout col-lg-4 col-md-3 col-sm-6 col-xs-12">
        <a class="odcatwall" href="{{ category.href }}">
            <div><img src="{{ category.image }}" /></div>
            <div class="odcatwallhref">{{ category.name }}</div>
        </a>
    </div>
  {% endfor %}
</div>

[maks1331]

Сообщение от Дмитрий134

Здравствуйте. Только недавно начал изучать программирование и столкнулся с такой проблемой. Каким способом можно закрепить блок в одном месте, чтобы он не менял расположение при масштабировании? При этом он должен находиться в обозначенной красной рамкой области. Прошу не ругать за банальный вопрос, несколько дней пытаюсь решить проблему с помощью гугла, но не выходит. Спасибо за внимание!

Конкретно может не помогу, но общую идею скажу.

У секций сайта должна быть некоторая ширина, например 1300px. Тогда, разместив дочерние блоки верстка ехать не будет, при vw > 1300px.

При верстке адаптивной версии стоит использовать следующий приём: доходим до ширины секции с запасом и уменьшаем её.

@media(max-width:1350px){
    .width{
        max-width:1100px;
        width:1100px;
    }
}

Адаптируем блоки и продолжаем, пока не доходим до vw = 320px.

Если ты задаёшь общую ширину, как %, например width: calc(100% - 50px*2), при размещении внутренних элементов это нужно учитывать, т.к. если у тебя родитель адаптивный, а дочки статичные - рано или поздно все поедет и это усложняет процесс. Новичку лучше делать так, как я описал выше. Кстати, большинство моих проектов строятся по этому принципу, т.к. это проще, а проще - быстрее, дешевле и надежнее.