Question

我在我的博客顶部定位我的语言选项时遇到了问题。它总是在Windows和Mac上处于不同的位置。所以我想到制作一个内在和外在的div。但是我对内心的位置感到麻烦。

这是我想要的结果：这就是我现在拥有的

这是我在wordpress上的CSS中的代码：

EDITED

<DataGrid ItemsSource="{Binding}" AutoGenerateColumns="False" HeadersVisibility="None" CanUserAddRows="False"
                      xmlns:local="clr-namespace:WpfApplication1">
    <DataGrid.Resources>
        <local:RowHeightConverter x:Key="conv" />
    </DataGrid.Resources>
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding Path=Col1}" Width="*"/>
        <DataGridTemplateColumn Width="*">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <DataGrid ItemsSource="{Binding Path=Col2}" AutoGenerateColumns="False" HeadersVisibility="None" CanUserAddRows="False">
                        <DataGrid.ItemContainerStyle>
                            <Style TargetType="DataGridRow">
                                <Setter Property="Height" Value="{Binding Path=., RelativeSource={RelativeSource AncestorType=DataGrid}, 
                                                Converter={StaticResource conv}}" />
                            </Style>
                        </DataGrid.ItemContainerStyle>
                        <DataGrid.Columns>
                            <DataGridTextColumn Binding="{Binding}" Width="*"/>
                        </DataGrid.Columns>
                    </DataGrid>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

带边框的区块只有.outer { margin: auto; overflow: visible; background: white; margin-left: 925px; margin-top: -8px; margin-bottom:-30px; font-size: 11pt; color: #E1BDC3; border: 1px dotted #999999; border-radius:8px; width: 255px; height: 48px; padding-top: 15px; padding-left: 10px; z-index: 1000; } .inner { position: relative; left: 160px; top: -336px; background: transparent; width: 150px; z-index: 10001; } 而内部div，即下拉列表，是我试图定位在页面顶部的小部件，我给了小部件<div class="outer"...。

问题 - ＆gt;如果我放"inner" class，它从屏幕右侧开始计算，我如何从外部div 的右侧定位（例如4px）？所以它从右边的虚线边框开始计数（或左边，不重要）

（我是HTML的初学者，所以如果你知道如何帮助我，请告诉我我需要哪些代码，以及在哪里？

Answer 1

您应该使用％来指代屏幕上的位置。但是，使用position: relative引用父对象内的poition，并使用top和left

移动它，可以解决您的问题

.outer {
    margin: auto;
    overflow: visible;
    background: white;
    margin-left: 925px;
    margin-top: -8px;
    margin-bottom:-30px;
    font-size: 11pt;
    color: #E1BDC3;
    border: 1px dotted #999999;
    border-radius:8px;
    width: 255px;
    height: 48px;
    padding-top: 15px;
    padding-left: 10px;
    z-index: 1000;
}

.inner {    
    position: relative;
    left: 159px;
    top: -17px;
    background: transparent; 
    width: 100px;     
}

<div class="outer">
  OUTER
  <div class="inner"><select><option>INNER</option></select></div>
</div>

Answer 2

回答你的问题＆＃34;我如何从外部div的右侧定位（例如4px）？＆＃34;你会通过首先确定元素之间的相互关系来做到这一点。这由position和display CSS属性决定。根据您的两个元素具有的position和display值，答案会有所不同。

您为＆＃34;外部＆＃34;提供的HTML标记。 element表示它是div。您的CSS未定义此元素的位置，因此浏览器默认为static，即position:static。

你的＆＃34;内心＆＃34;元素对我们来说是一个谜。如果它是另一个div那么它是我们可以帮助的另一个静态位置。如果它是ul，则它是inline元素，这将需要不同的答案。

你的标记很重要。

修改

首先，你的外在＆＃39; div实际上并不包含您的内部div。这是外部div标记：

<div class="hide_on_mobile outer">Choose language</div>

您会发现它并不包含我们想要定位的元素。因此，就像我的第一句话所述，我们需要理解我们的元素与周围的元素的关系。

在您的情况下，您不是一个好位置，因为您要定位的元素包含在与您的目标元素无关的元素中。因此，在所有屏幕尺寸上将它们放置在同一位置的唯一方法是将它们absolute定位并使用百分比。

或者简单的方法，如果你想坚持一个屏幕宽度：

.inner {
    position: relative;         //override by .widget_polylang element
    left: 27px;
    top: -17px;                 //override by .widget_polylang element
    background: transparent;
    width: 100px;               //override by .widget_polylang element
}

您会看到某些键/值参数被.widget_polylang元素排除在外。更改这些内容的唯一方法是编辑.widget_polylang的样式或将增加的CSS特性添加到.inner。

如何从另一个div中定位div ... px

2 个答案:

修改