位置粘不起作用

我試圖在向下滾動網頁時粘貼一段文本，但似乎不起作用。我給它這個CSS：位置粘不起作用

.left { 
    position: sticky; /* doesnt work :(*/ 
    top: 0px; 
}

下面是完整的代碼：http://jsfiddle.net/YYPKM/3281/

這個div是在包裝的左側，但我想正確的滾動和左堅持div的頂部。我已經嘗試了很多像固定位置這樣的東西，但這似乎是最好的選擇，我只是無法讓位置粘滯工作。

有誰知道我在做什麼錯？

來源

2017-08-29 rishubk

.wrapper's display：flex is caused the issue –

you may try a display to table：table;如果這符合你的佈局需求：http://jsfiddle.net/YYPKM/3284/ –

謝謝你做到了，我會接受^如果你發佈它 – rishubk

我想用display: table並沒有真正解決問題。

您只需添加align-self: flex-start;即可將flexbox元素的高度設置爲auto。

.left { 
    position: sticky; 
    top: 0; 
    align-self: flex-start; 
}

來源

2017-12-18 07:49:08 MaxisKao

問題是，父母被視爲一個靈活的容器，它使孩子的靈活項目。現在這些項目顯示爲彈性項目，它停止工作。如果您從包裝中刪除display:flex，它將起作用。

來源

2017-08-29 18:11:30

什麼是最好的方法來保持在右邊的數字雖然 – rishubk

你可以使用'display：inlineblock;寬度：50％;'和父母應該有'位置：相對和身高100％'。我不知道這是否會起作用。我會在業餘時間嘗試一下 –

hm似乎沒有工作 – rishubk

指定所需的寬度爲.left和.right
添加float: left到.left
設置.right的填充，以.left的寬度

退房小提琴這裏： http://jsfiddle.net/YYPKM/3283/

來源

2017-08-29 19:26:51

如果我不知道所需的寬度 – rishubk

一個選項可以使用display:table;一個類似的佈局：

.wrapper { 
 
    display: table; 
 
} 
 

 
.description { 
 
    margin-bottom: 50px; 
 
} 
 

 
.left { 
 
    box-shadow: 0 0 0 5px; 
 
    margin-right: 50px; 
 
    position: sticky; 
 
    /* doesnt work :(if display:table-cell or flex is set or if it is a flex child */ 
 
    position: -webkit-sticky; 
 
    top: 0; 
 
} 
 
.right{ 
 
    display:table-cell;/*NOTE: do not emulate display on .left */ 
 
} 
 
.right, 
 
.left {/*see me*/ 
 
    box-shadow: 0 0 5px; 
 
}

<body> 
 
    <h2> 
 
    TITLE 
 
    </h2> 
 
    <div class='description'> 
 
    Some words to describe this awesome web page 
 
    </div> 
 
    <div class="wrapper"> 
 
    <div class="left"> 
 
     want to keep this text all the way down 
 
    </div> 
 
    <div class="right"> 
 
     <div>1</div> 
 
     <div>2</div> 
 
     <div>3</div> 
 
     <div>4</div> 
 
     <div>5</div> 
 
     <div>6</div> 
 
     <div>7</div> 
 
     <div>8</div> 
 
     <div>9</div> 
 
     <div>10</div> 
 
     <div>11</div> 
 
     <div>12</div> 
 
     <div>13</div> 
 
     <div>14</div> 
 
     <div>15</div> 
 
     <div>16</div> 
 
     <div>17</div> 
 
     <div>18</div> 
 
     <div>19</div> 
 
     <div>20</div> 
 
     <div>21</div> 
 
     <div>22</div> 
 
     <div>23</div> 
 
     <div>24</div> 
 
     <div>25</div> 
 
     <div>26</div> 
 
     <div>27</div> 
 
     <div>28</div> 
 
     <div>29</div> 
 
     <div>30</div> 
 
     <div>31</div> 
 
     <div>32</div> 
 
     <div>33</div> 
 
     <div>34</div> 
 
     <div>35</div> 
 
     <div>36</div> 
 
     <div>37</div> 
 
     <div>38</div> 
 
     <div>39</div> 
 
     <div>40</div> 
 
     <div>41</div> 
 
     <div>42</div> 
 
     <div>43</div> 
 
     <div>44</div> 
 
     <div>45</div> 
 
     <div>46</div> 
 
     <div>47</div> 
 
     <div>48</div> 
 
     <div>49</div> 
 
     <div>50</div> 
 
    </div> 
 
    </div> 
 
</body>

變通也在這裏http://jsfiddle.net/YYPKM/3284/

來源

2017-08-29 22:06:18

位置粘不起作用

回答

相關問題