#html #css
#HTML #CSS
Вопрос:
в следующем примере кода я хотел бы разместить свой круг за пределами красного div и по — прежнему быть видимым. однако из-за родителей overflow: auto он не полностью виден, даже когда я переключаюсь overflow-x на видимый и overflow-y автоматический. бабушки переполняются, но я все еще вижу их круги
.parent { background-color: blue; height: 300px; width: 300px; padding: 20px; } .child { position: relative; background-color: red; height: 150px; width: 150px; padding: 10px; overflow: auto; } .grand-child { height: 40px; width: 100px; background-color: hotpink; border: black 1px solid; } .circle { position: fixed; background-color: green; left: -5px; border-radius: 50%; height: 20px; width: 20px; background-color: green; } lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;meta charset="UTF-8"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;link rel="stylesheet" href="index.css"gt; lt;titlegt;Testinglt;/titlegt; lt;/headgt; lt;bodygt; lt;div class="parent"gt; lt;div class="child"gt; lt;div class="grand-child"gt; lt;span class="circle"gt; ss lt;/spangt; lt;spangt; hello lt;/spangt; lt;spangt; world lt;/spangt; lt;/divgt; lt;div class="grand-child"gt; lt;span class="circle"gt; ss lt;/spangt; lt;spangt; hello lt;/spangt; lt;spangt; world lt;/spangt; lt;/divgt; lt;div class="grand-child"gt; lt;span class="circle"gt; ss lt;/spangt; lt;spangt; hello lt;/spangt; lt;spangt; world lt;/spangt; lt;/divgt; lt;div class="grand-child"gt; lt;span class="circle"gt; ss lt;/spangt; lt;spangt; hello lt;/spangt; lt;spangt; world lt;/spangt; lt;/divgt; lt;div class="grand-child"gt; lt;span class="circle"gt; ss lt;/spangt; lt;spangt; hello lt;/spangt; lt;spangt; world lt;/spangt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt; Ответ №1:
вы можете попробовать это
// Удаление переполнения: автоматически; // добавление позиции:исправлено;
.parent { background-color: blue; height: 100px; width: 100px; padding: 20px; } .child { position: relative; background-color: red; height: 50px; width: 50px; padding: 10px; overflow: auto; } .circle { position: fixed; background-color: green; left:8px; border-radius: 50%; height: 20px; width: 20px; background-color: green; } lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;meta charset="UTF-8"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;link rel="stylesheet" href="index.css"gt; lt;titlegt;Testinglt;/titlegt; lt;/headgt; lt;bodygt; lt;div class="parent"gt; lt;div class="child"gt; lt;span class="circle"gt; ss lt;/spangt; lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt; Комментарии:
1. привет, ваше решение, похоже, работает, однако, когда содержимое ребенка переполняется, все еще отображается круг, хотя внук не отображается, ознакомьтесь с обновленным вопросом
2. думайте об этом как о пункте списка «сделать»