位置粘不起作用

我试图在向下滚动网页时粘贴一段文本，但似乎不起作用。我给它这个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

位置粘不起作用

回答

相关问题