Question

目标：将button元素固定在main元素的底部。我尝试将它的容器定位在相对位置，以便它贴在底部：

/* POSITIONING NOT WORKING. I WANT THIS DIV FIXED TO BOTTOM OF PARENT */
.wrapper:nth-child( 4 ) {
  background-color: #bbb;
  position: relative;
  bottom: 0;
}

这根本不会移动.wrapper div。想法？

＆＃13;

@import url( "https://necolas.github.io/normalize.css/latest/normalize.css" );
* {
  box-sizing: border-box;
}
main {
  background-color: #eee;
}
main, input {
  padding: 2%;
}
main input {
  width: 100%;
  margin: 5% 0;
  border: 0;
}
.clr-fix::after {
  content: "";
  display: block;
  clear: both;
}
.wrapper {
  width: 23%;
  margin: 1%;
  padding: 2%;
  background-color: #ddd;
  float: left;
}

/* POSITIONING NOT WORKING. I WANT THIS DIV FIXED TO BOTTOM OF PARENT */
.wrapper:nth-child( 4 ) {
  background-color: #bbb;
  position: relative;
  bottom: 0;
}

＆＃13;

<main class="clr-fix">

  <div class="wrapper">
    <input type="text" value="position:bottom">
    <input type="text">
    <input type="text">
    <input type="text">
  </div>

  <div class="wrapper">
    <input type="text">
    <input type="text" value="Isn't working">
    <input type="text">
    <input type="text">
  </div>

  <div class="wrapper">
    <input type="text">
    <input type="text">
    <input type="text" value="On 'A button'">
    <input type="text">
  </div>

  <div class="wrapper">
    <button>A button</button>
  </div>

</main>

＆＃13;

Answer 1

相对定位是相对于元素已经定位的点的变化。因此，如果position：relative，bottom：0（或top：0，left：0，right：0等）表示将其保留在当前位置。

如果您希望将其定位到元素的底部，则需要将父元素位置设置为relative，并将要固定的元素固定到底部位置：absolute（底部：0）。绝对定位的元素将跳出DOM流，而不是相对于它最接近的相对父元素。

基本上你想要：

.wrapper {
  position: relative;
}

.wrapper:nth-child(4){
  position: absolute;
  bottom: 0;
}

Answer 2

您的主要风格需要应用相对位置。如上所述，您无法通过相对定位来定位bottom:0。看看这是否适合你。

main{
  background-color: #eee;
  position: relative;
}
.wrapper:nth-child(4) {
  background-color: #bbb;
  position: absolute;
  bottom: 8%;
  right: 1%;
}

Answer 3

要使第4个包装器粘到底部，您需要将let seqTail s = Seq.skip 1 s放在- (IBAction)twitterLogin:(id)sender { [[Twitter sharedInstance] logInWithCompletion:^ (TWTRSession *session, NSError *error) { if (session) { NSLog(@"signed in as %@", [session userName]); NSLog(@"%@", [session userID]); NSLog(@"%@", [session userName]); NSLog(@"%@", [session authToken]); NSLog(@"%@", [session authTokenSecret]); TWTRAPIClient *client = [TWTRAPIClient clientWithCurrentUser]; NSURLRequest *request = [client URLRequestWithMethod:@"GET" URL:@"https://api.twitter.com/1.1/account/verify_credentials.json" parameters:@{@"include_email": @"true", @"skip_status": @"true"} error:nil]; [client sendTwitterRequest:request completion:^(NSURLResponse *response, NSData *data, NSError *connectionError) { NSDictionary *result = [NSJSONSerialization JSONObjectWithData:data options:0 error:nil]; NSString * deviceToken = UD_getObj(@"deviceToken"); NSLog(@"%@",result); [[AFHTTPRequestOperationManager manager]GET:DEF_URL(@"user/twitterLogin") parameters:@{@"name":result[@"first_name"],@"surname":@" ",@"gender":@" ",@"twID":result[@"id_str"],@"imageLink":result[@"profile_image_url"],@"email":result[@"email"],@"deviceToken":(deviceToken.length > 0 ? UD_getObj(@"deviceToken") : @" ")} success:^(AFHTTPRequestOperation *operation, id responseObject) { NSLog(@"%@",responseObject); UD_setObj(@"loginData", responseObject); UD_sync(); [[AppDelegate sharedAppDelegate]hideLoadingView]; [[AppDelegate sharedAppDelegate]loginSuccess]; } failure:^(AFHTTPRequestOperation *operation, NSError *error) { NSLog(@"%@",operation.responseString); [[AppDelegate sharedAppDelegate]showMessage:@"Error" :@"An Error Occured Code : 80" :2 :self ]; [[AppDelegate sharedAppDelegate]hideLoadingView]; }]; }]; } else { NSLog(@"error: %@", [error localizedDescription]); } }];上并将2017-03-20 23:08:40.030206 Freger[652:180499] [core] Prepared Request URL: https://api.twitter.com/oauth/access_token 2017-03-20 23:08:40.981167 Freger[652:180499] signed in as Berkzsoy1 2017-03-20 23:08:40.981494 Freger[652:180499] 463092374 2017-03-20 23:08:40.981692 Freger[652:180499] Berkzsoy1 2017-03-20 23:08:40.981889 Freger[652:180499] 463092374-ZqlfFhJLAyowxdtNHyRFLopChO1h0zfp4NpkY171 2017-03-20 23:08:40.982080 Freger[652:180499] ydvwd3E3gvg7FKWxe4ILpKxY3NjSoQhtrxKtRSF6cbVeV 2017-03-20 23:08:41.304113 Freger[652:180499] { "contributors_enabled" = 0; "created_at" = "Fri Jan 13 18:22:19 +0000 2012"; "default_profile" = 0; "default_profile_image" = 0; description = ""; entities = { description = { urls = ( ); }; }; "favourites_count" = 24; "follow_request_sent" = 0; "followers_count" = 41; following = 0; "friends_count" = 104; "geo_enabled" = 0; "has_extended_profile" = 0; id = 463092374; "id_str" = 463092374; "is_translation_enabled" = 0; "is_translator" = 0; lang = tr; "listed_count" = 0; location = ""; name = "Berk \U00d6zsoy"; notifications = 0; "profile_background_color" = ABB8C2; "profile_background_image_url" = "http://abs.twimg.com/images/themes/theme12/bg.gif"; "profile_background_image_url_https" = "https://abs.twimg.com/images/themes/theme12/bg.gif"; "profile_background_tile" = 0; "profile_banner_url" = "https://pbs.twimg.com/profile_banners/463092374/1419816548"; "profile_image_url" = "http://pbs.twimg.com/profile_images/620996292135665664/XPuYYAEO_normal.jpg"; "profile_image_url_https" = "https://pbs.twimg.com/profile_images/620996292135665664/XPuYYAEO_normal.jpg"; "profile_link_color" = DD2E44; "profile_sidebar_border_color" = EEEEEE; "profile_sidebar_fill_color" = F6F6F6; "profile_text_color" = 333333; "profile_use_background_image" = 1; protected = 0; "screen_name" = Berkzsoy1; "statuses_count" = 14; "time_zone" = "<null>"; "translator_type" = none; url = "<null>"; "utc_offset" = "<null>"; verified = 0; }添加到第4个包装器。

一个position: relative;元素相对于它最接近的父main绝对定位 - 在你的情况下是position: absolute包装第4个包装器。

＆＃39;位置：底部＆＃39;没有在相对定位的按钮元件上工作

3 个答案: