У меня есть изображение + круглая рамка вокруг него, которую я хотел бы покрыть прямоугольником. Я достиг такого взгляда, как показано на скрипке ниже, но если вы прокрутитесь по кругу с кошкой, появится полоса прокрутки, и вы можете немного переместить изображение. Я хотел бы получить тот же вид, который у меня есть сейчас, но без прокрутки.Попытка иметь круглую рамку div + фон накладывать прямоугольную границу div
https://jsfiddle.net/6t8mzxpu/
thanks :)
Чтобы предотвратить прокрутку на элементе, добавьте:
#main-picture {
overflow: hidden
}
Если вы делаете это, он не достигает эффекта, который я ищу, поскольку я использую переполнение: overlay –
Если я что-то не хватает, наложение ничего не делает для вас. Overlay - это значение, поддерживаемое только браузерами webkit, и оно имитирует авто. Когда я меняю его на скрытое, то для меня это выглядит одинаково. Что для вас отличается от этих двух параметров переполнения? – Taz
Froy Т было правильно в предложении использовать позицию абсолютной. Я был в состоянии достичь желаемого эффекта с ней, как показано ниже:
https://jsfiddle.net/6t8mzxpu/1/
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 50px;
#main-picture {
overflow: none;
}
Это будет делать ...
Я предполагаю, что вы все еще хотите, чтобы круг вокруг изображения появится над прямоугольником, если это правда, то переполнение: скрытое не будет работать. Я бы предложил отображать divs абсолютно и используя [z-index] (http://www.w3schools.com/cssref/pr_pos_z-index.asp). – Froy
Это помогло! Я обновил скрипку и оставил рабочую версию в качестве ответа на этот вопрос. –
В вашем вопросе указывалось, что вы хотите избавиться от полосы прокрутки, а также не иметь круг границы над квадратом. Я ответил на это, и я его остановил. ОК. – Taz