Позиционирование элемента CSS

#позиционирование #css

Есть изображение. Как спозиционировать крестик (Х) в правый верхний угол изображения?
Пропорции картинки могут быть разными.    

Ответы

Ответ 1

Просто через абсолютное позиционирование относительно родителя картинки.



img {
  width: 100%;
}
.img-wrapper {
  width: 400px;
  position: relative;
}
.img-wrapper .close-link {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 5px;
  background: rgba(255,255,255,.5);
  color: rgba(0,0,0,.5);
  text-decoration: none;
  border-radius: 5px;
}
.img-wrapper .close-link:hover {
  background: rgba(255,255,255,.85);
  color: rgba(0,0,0,.85);
}

  ×
  



Ответ 2

for(var i=0; i < document.getElementsByClassName('image').length; i++)
{
    document.getElementsByClassName('del')[i].style.marginLeft = document.getElementsByClassName('image')[i].offsetWidth-16
+ 'px';
}

    x
    



    x
    



    x
    



Ответ 3

Вот так


Ответ 4

float:right;
vertical-align:top;

Как перепозиционировать элементы не меняя структуры html?

#html #css #css3 #позиционирование

Есть совместный блок с ценой стандартной и скидочной. Хочу поменять последовательность
вывода стандартная цена, затем скидочная, причем оба блока должны выводиться по центру
и цена будет каждый раз разная (а значит и ширина блоков будет каждый раз разная).
Как это можно сделать с помощью стилей не меняя структуры html ? фидл



del {
  float: right;
}
.price {
  text-align: center;
}
11.390 руб.
 9.340 руб.




    

Ответы

Ответ 1

Есть еще такой вариант

.price {
  position: relative;
  text-align:center;
}
del {
  position: absolute;
  top: 0;
  left: 50%;
}
ins {
  position: absolute;
  top: 0;
  right: 50%;
}


https://jsfiddle.net/skywave/y837g3gn/4/


Ответ 2

Вот как можно перепозиционировать элементы:

.price{
  width: 100%;
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center; 
  justify-content: center;
}


Ответ 3

Если рядом нету других инлайновых элементов, то может такой подход сможет помочь?
jsfiddle.net/y837g3gn/2/

11.390 руб.
9.340 руб.

del {
  float:left;
  margin-left: -50%;
}
.price {
  display: inline-block;
  margin-left: 50%;
}


Если есть, то после обеда можно поколдовать еще.


Ответ 4

.price {
  text-align: center;
  position: relative;
  min-height: 1px;
}
del {
  position: absolute;
  transform: translateX(5%);
}
ins {
  position: absolute;
  transform: translateX(-105%);
}

  
    11.390   руб.
    
  
  
    9.340   руб.
    
  

Как сверстать расположение фото?

#вёрстка #веб_программирование #позиционирование

Вот так надо, не пойму, как сверстать такое расположение картинок с учетом размеров
сетки. Хотя бы расположить их согласно макету, размеры подгоню.
    

Ответы

Ответ 1

Набросал верстку.



.container {
  width: 600px;
  height: 600px;
  border: 1px solid;
}
.flex {
  display: flex;
}
.mini-width {
  min-width: 150px;
}
.mini-height {
  min-height: 150px;
}
.column {
  flex-direction: column;
}
.padding {
  padding: 6px;
}
.fs {
  flex: 1;
}
.pseudo-img {
  width: 100%;
  height: 100%;
  background: red;
}


  

    

      

        

          

            
          
        
        

          

            
          
          

            
          
        
      
      

        

          
        
        

          

            
          
        
      
    
    

      

        
      
      

        
      
    
  





Исходник codepen


Ответ 2

Попробуй что-то вроде этого



.border{
  border: 1px solid black;  
}

  

    

      

      

        

        

      
    
    

      

      

    
  
  

    

    

  

Как правильно позиционировать footer на сайте?

#html #css #позиционирование

На сайте есть header, content и footer блоки.
У content на разных страницах разная высота, бывает что высота меньше чем body и
тогда шапка находится не внизу страницы а выше. Как правильно позиционировать футер?
Нужно ли устанавливать минимальную высоту для content чтобы прижать footer  к низу?
Хотя минимальную высоту я установить не могу, так как высота на разных устройствах
разная. Как поступать в таких случаях?
    

Ответы

Ответ 1

футер прижимается вниз путём его абсолютного позиционирования и вытягивания высоты
родительских блоков: html, body и блока с классом .wrapper на 100%. При этом конкретному
блоку .content необходимо задать нижний отступ, который равен или больше высоты футера,
в противном случае последний закроет часть содержимого.

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.wrapper {
  position: relative;
  min-height: 100%;
}
.content {
  padding-bottom: 90px;
}
.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 80px;
}

Разметка



    

        

            
Text
        
        
Text footer
    




Как-то так


Ответ 2

Пользуюсь таким методом:


  
  
  
    

      
    
    

      
    
  



Класс with-sticky-footer - чтобы не перегружать стандартные стили html и body, так
как футер может встречаться не на всех страницах сайта.

Стили:

html.with-sticky-footer {
  height: auto;
  min-height: 100%;
  position: relative;
}
html.with-sticky-footer body {
  height: auto;
  margin-bottom: 100px;
  position: initial;
}
html.with-sticky-footer .body-before-footer {
  background: #fff;
}
html.with-sticky-footer footer {
  bottom: 0;
  height: 100px;
  min-width: 100%;
  position: absolute;
}


Цвет background: #fff; у .body-before-footer задается такой же, как у body. Это помогает,
если вы хотите расположить футер фиксированно и как бы "под" контентом. Посмотрите,
как это реализовано здесь: http://rubycourses.ru/. Я просто задал цвет для .body-before-footer
и position: fixed для футера.


Ответ 3

То что вы хотите сделать, называется Sticky Footer (липкий футер). Существует множество
способов реализовать подобное поведение. 

1. Отрицательный margin у footer-а

html



  

    content
  
  




css

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}


2. Отрицательный margin у content

html


  

      content
    

  
  




css

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;
  margin-bottom: -50px;
}
.footer,
.push {
  height: 50px;
}


3. С помощью calc()

html


  

    content
  
  




css

.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}


4. Через свойство flexbox

html


  

    content
  
  




css

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
} 


5. Через свойство grid

html


  

    content
  
  




css

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

Выстроить элементы внутри svg последовательно

Как последовательно выстроить группы внутри одного svg-элемента? Надо чтобы элементы g первого svg сами встали приблизительно как svg-теги во втором divе.
https://jsfiddle.net/kj1tmre3/1/

PS: Этот вопрос по-английски.

Ответ

К сожалению, svg не умеет автоматически раскладывать элементы, как это происходит в html. Однако, можно вложить группы друг в друга и применить к ним transform - в таком случае каждая группа будет уползать всё дальше от родительской. Вот такой хак:
.dest g { transform: translateX(24px); } .dest svg > g { transform: translateX(0); }

PS: А вообще лучше воспользоваться несколькими svg-тегами.

Как перепозиционировать элементы не меняя структуры html?

Есть совместный блок с ценой стандартной и скидочной. Хочу поменять последовательность вывода стандартная цена, затем скидочная, причем оба блока должны выводиться по центру и цена будет каждый раз разная (а значит и ширина блоков будет каждый раз разная). Как это можно сделать с помощью стилей не меняя структуры html ? фидл
del { float: right; } .price { text-align: center; }

11.390 руб. 9.340 руб.

Ответ

Есть еще такой вариант
.price { position: relative; text-align:center; } del { position: absolute; top: 0; left: 50%; } ins { position: absolute; top: 0; right: 50%; }
https://jsfiddle.net/skywave/y837g3gn/4/

Как сверстать расположение фото?

Вот так надо, не пойму, как сверстать такое расположение картинок с учетом размеров сетки. Хотя бы расположить их согласно макету, размеры подгоню.

Ответ

Набросал верстку.
.container { width: 600px; height: 600px; border: 1px solid; } .flex { display: flex; } .mini-width { min-width: 150px; } .mini-height { min-height: 150px; } .column { flex-direction: column; } .padding { padding: 6px; } .fs { flex: 1; } .pseudo-img { width: 100%; height: 100%; background: red; }

Исходник codepen

Как правильно позиционировать footer на сайте?

На сайте есть header, content и footer блоки. У content на разных страницах разная высота, бывает что высота меньше чем body и тогда шапка находится не внизу страницы а выше. Как правильно позиционировать футер? Нужно ли устанавливать минимальную высоту для content чтобы прижать footer к низу? Хотя минимальную высоту я установить не могу, так как высота на разных устройствах разная. Как поступать в таких случаях?

Ответ

футер прижимается вниз путём его абсолютного позиционирования и вытягивания высоты родительских блоков: html, body и блока с классом .wrapper на 100%. При этом конкретному блоку .content необходимо задать нижний отступ, который равен или больше высоты футера, в противном случае последний закроет часть содержимого.
* { margin: 0; padding: 0; } html, body { height: 100%; } .wrapper { position: relative; min-height: 100%; } .content { padding-bottom: 90px; } .footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 80px; }
Разметка

Text

Text footer

Как-то так