html - 为什么静态定位父级的绝对定位子级占据视口(viewport)的整个宽度？-6ren

html - 为什么静态定位父级的绝对定位子级占据视口(viewport)的整个宽度？

转载作者：太空宇宙更新时间：2023-11-04 10:47:14

25

4

我一直在学习从 this w3schools example 制作基本的下拉菜单.据说我们可以通过将 min-width 设置为 100% 来改变下拉内容的宽度。它工作得很好。但是，如果我将 position: relative 更改为 position: static，则下拉内容最终会占用窗口的 100% 宽度。 AFAIK width: 100% 应该将宽度设置为父容器的 100%。将父容器的位置更改为静态不会改变它的宽度，因此子容器不应分布在父容器中。以下是我正在尝试的代码:

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
    position: static;
    display: inline-block;
    border: 2px solid red;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: grey;
    min-width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

</body>
</html>

So, why is setting position-static for .dropdown class(or parent element in general) causing the .dropdown-content class elements(or child elements in general) to have full screen width rather than having same width as that of the parent container?

附录: 静态位置父项的绝对定位子项似乎占据了视口(viewport)的整个宽度。例如。以下代码:

<DOCTYPE html>
<html>
<head>
<style>
div#one{border: 2px dotted red; position: static; width:100px;}

div#two{border: 2px solid blue; width:100%; position: absolute;}
</style>
</head>
<body>
<div id="one">

Text of statically positioned box
<div id="two"> Text of absolutely positioned box.</div>

</div>

</body>
</html>

蓝色框分布在整个视口(viewport)中，位于具有红色边框的父容器之外。为什么会这样？

最佳答案

Static 是页面上任何元素的默认行为。因此，当您将 .dropdown-content 的位置设置为 absolute 时，它会根据最近的相对定位的父级设置其宽度，这在您的case 是视口(viewport)，因为没有其他元素相对定位。

但是您将 .dropdown 定位为相对移动，将 .dropdown-content 定位为绝对移动，.dropdown-content(这是.dropdown) 的子级从最近的relatively positioned 父级 (.dropdown) 获取它的宽度，这就是为什么 .dropdown-content 在它的父级(.dropdown)静态定位时占据全宽。

.dropdown {
    position: static;
    display: inline-block;
    border: 2px solid red;
}
.dropdownRelative {
    position: relative;
    display: inline-block;
    border: 2px solid red;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: grey;
    min-width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
  z-index: 2;
}
.parent{
 position: relative;
  margin-top:20px;
  width: 400px;
  border: 2px solid red;
}
.dropdown:hover .dropdown-content,.dropdownRelative:hover .dropdown-content,.parent:hover .dropdown-content {
    display: block;
}

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>I am statically positioned and parent as static.</p>
  </div>
</div>
  <div class="dropdownRelative">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>I am absolutely positioned and my parent is relatively positioned</p>
  </div>
</div>
<div class="parent">
  <span>Hover over me</span>
  <div class="dropdown-content">My parent is relatively positioned!</div>
  </div>
</body>
</html>

关于html - 为什么静态定位父级的绝对定位子级占据视口(viewport)的整个宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35294595/

25

4

0

文章推荐： css - 最终用户是否可以替换 Css 文件？

c++ - 静态 __forceinline 或 __forceinline 静态
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 5 年前。 Improve
C# 静态 "this"
在 C# 静态方法中是否有一种方法可以引用定义该方法的类型？在实例方法中，您可以通过以下方式确定类型: public void Foo() { Type type = this.GetTyp
WPF:静态、动态资源以及资源词典
WPF:静态、动态资源以及资源词典静态资源与动态资源我们常常会使用样式或者控件模板放在Window.Resources中，比如这样：静态资源与动态资源使用如下： <Window
.net - 静态/共享功能中的LoadControl
任何人都知道如何在共享/静态函数中动态加载控件？该函数本身位于 mustinherit/abstract 类中。 (这是 VB 中的 ASP.NET 项目)我想做这样的事情: VB: Publ
refactoring - 静态/强类型和重构
在我看来，静态/强类型编程语言最宝贵的一点是它有助于重构:如果/当您更改任何 API，那么编译器会告诉您该更改破坏了什么。我可以想象用运行时/弱类型语言编写代码......但我无法想象没有编译器的帮
java - 无参数方法/静态
正如我的名字所暗示的，我是一名 .NET 开发人员，但我对 Java 的兴趣越来越大，并且我有兴趣学习更多其他语言，因为这有助于我学习更多关于编程的知识。无论如何，我的问题是:不带参数/不使用状态的
静态 Json 文件的响应模板
我在java中使用WireMock来 stub POST请求。该请求返回一个存储在我本地的 json 正文文件。 stub 看起来像这样: wireMockServer.stubFor(get(url
Python 类构造函数(静态)
Python 是否有类构造函数的机制，即每当首次引用类时(而不是创建该对象的实例时)调用的函数？我知道其他一些语言中也存在这种情况，但我还没有在 Python 中遇到过。基本上，我想初始化该函数中的
Python 类构造函数(静态)
Python 是否有类构造函数的机制，即每当首次引用类时(而不是创建该对象的实例时)调用的函数？我知道其他一些语言中也存在这种情况，但我还没有在 Python 中遇到过。基本上，我想初始化该函数中的
java - 静态/编译时多态性
这个问题已经有答案了: What is the difference between dynamic and static polymorphism in Java? (14 个回答) 已关闭 4 年
Java 静态 - 方法或字段？
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: Static initializer in Java 我想知道这个静态的东西(抱歉，这是我第一次遇到这个)对一个类有
c++ - 静态/动态链接的静态初始化顺序问题
如果c++应用程序是按以下方式组织的 //file1.cpp static Y sgObj = X::getInitObject(0); //declared in file scope //fil
java - 静态/抽象冲突
我有一个抽象类(AvergedDataRecord)，我需要进一步抽象(DataRecord)，这样我就可以将它扩展到原始类和一个新的具体类(SummedDataRecord)，并且我在获取某些方法时
c# - 静态 IEnumerable？
我正在尝试制作一个字符串枚举。这是我到目前为止所得到的， private class TypedEnum : IEnumerable { public IEnumerator GetEnume
c - 静态/动态源代码分析
我选修了一门名为“安全代码”的类(class)，在下一个作业中，我们应该对一些 C 文件和 JavaEE Web 项目进行静态/动态分析。我检查了“源监视器”并在 C 文件上运行它，但是(除非我不知
java - 类之间的共享首选项(静态)？
我有两个类，一个是登录类，一个是用户类。在 loggedIn 类中，我想显示我在用户登录时所做的共享首选项。 loginPrefs = getSharedPreferences("loginprefe
android - 静态 fragment
我在同一个 Activity 中有两个静态 fragment ，在“fragmentA”中我有一个自定义列表，当一个项目被点击时必须在“fragmentB”中出现一个细节，细节只在我改变屏幕方向时出现
Java 静态/实例方法优化
在 Java 中是未修改方法变量，缺少final，每次都重新初始化限定符静态方法实例方法如果 1. 或 2.(或两者)的答案是 final 限定符允许 Java 执行优化并存储方法变量只有一次？
java - 静态-非静态交互
我有两个类相互交互。第一个是中心的，如下: public class Datenbank { double winkelPanel = 0; double groessePanel = 0; doub
静态 mysql 加密
我有一个 mysql 数据库，它连接基于 Web 的 php 应用程序和 FoxPro 应用程序(是的，foxpro)。在之前的“开发人员”被解雇后开始处理这个问题。无论如何，我熟悉 AES_Enc

首页

博学

6Ren·AI

商城

html - 为什么静态定位父级的绝对定位子级占据视口(viewport)的整个宽度？