如何通过 CSS 和 BootStrap 根据另一个 <div> 元素设置 <div> 元素的位置

Question

我开发 bootstrap asp.net mvc。我有一个元素要放在另一个元素的右下角。 我是这样调整的

HTML

<div class="container-fluid" style="vertical-align:middle; position:center;">
    <div class="row" style="vertical-align:middle; position:center;">
        @Html.DevExpress().ImageSlider(s =>
   {
       s.Name = "ImageSlider1";
       s.Width = Unit.Percentage(100);
       s.Height = Unit.Pixel(400);

       s.SettingsImageArea.ImageSizeMode = ImageSizeMode.FillAndCrop;
       s.SettingsImageArea.NavigationButtonVisibility = ElementVisibilityMode.OnMouseOver;
       s.SettingsImageArea.EnableLoopNavigation = true;
       s.SettingsImageArea.AnimationType = AnimationType.Slide;
       s.SettingsImageArea.NavigationDirection = NavigationDirection.Vertical;
       s.SettingsNavigationBar.Position = NavigationBarPosition.Left;
       s.SettingsNavigationBar.PagingMode = NavigationBarPagingMode.Single;
       s.SettingsNavigationBar.Mode = NavigationBarMode.Thumbnails;



   }).BindToFolder("~/Content/Images/widescreen").GetHtml()


            <div id="countdown" style=" margin-top:62%; margin-right:3%;" >
                <div id='tiles'></div>
                <div class="labels">
                    <li>days</li>
                    <li>Hours</li>
                    <li>Min</li>
                    <li>Seconds</li>
                </div>
            </div>

        </div>
    </div>

在 CSS 中

    #countdown{
    width: 230px;
    height: 72px;
    position: relative-to first-sibling(.row); 
    bottom: 2px; 
    right: 2px;
    text-align: center;
    background: #222;
    background-color: transparent;
    /*background-image: -webkit-linear-gradient(top, #f7530a, #e6a815, #e6a815, #f7530a);*/ 
    background-image: -webkit-linear-gradient(top, green,#fff, #fff, green);
    background-image:    -moz-linear-gradient(top, #222, #333, #333, #222);
    background-image:     -ms-linear-gradient(top, #222, #333, #333, #222);
    background-image:      -o-linear-gradient(top, #222, #333, #333, #222);
    border: 1px solid #111;
    border-radius: 5px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
    margin: auto;
    padding: 24px 0 2px 0;
    position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

像这张照片一样。但我希望这个元素固定在该元素的右下角，即使窗口大小减小或改变

enter image description here

Answer 1

定位一个元素，使其始终位于其容器的右下角。您可以在容器上使用相对位置，在子级上使用绝对位置。这将绝对定位孩子，相对于容器。

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  position: relative;
}

.child {
  position: absolute;
  bottom: 0;
  right: 0;
}