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

Question

我开发bootstrapasp.netmvc。我有一个元素想放在另一个元素的右下角。我这样调整

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;
}

喜欢这张图就好了。但我希望这个元素固定在该元素的右下角，即使 windows 大小减小或更改

enter image description here

Answer 1

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

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

.parent {
  position: relative;
}

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

Answer 2

像这样使用css

  .parent{
      position: relative;
    }
     .parent #countdown{
       position: absolute;
       bottom: 0;
       right: 0;   
     }

记住一点，没有 css 属性像 position: center;。从#countdown div

中移除 margin-top 和 margin-right 属性

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

how to set position of <div> element based on another <div> element by CSS and BootStrap

css

bootstrapping